0

I'm taking an online class and today's assignment should have taken 1/2 an hour but it took me 5. Eventually I quit trying because I couldn't figure out where I was going wrong. Upon doing my peer reviews, I saw a few examples of the correct code, and I now know I was going wrong with my use of quotation marks. But the working code looks like utter gibberish to me. Can you explain to me how this makes sense?

function upDate(previewPic){
  document.getElementById('image').style.backgroundImage = "url" + "("+ previewPic.src+")";
}

I'm feeling frustrated because I spent all day searching everywhere online for how to use javascript to change a background image in CSS. I got close, but no one showed me any use of quotes that looked like this (nor did the instructor in my class). I don't know how I was supposed to be able to figure this out, nor how any of my classmates figured it out.

Improve this question
5
  • What's your question? Commented Feb 15, 2016 at 6:13
  • we don't know what you were trying and what was not working, which is why it is difficult to comprehend your frustration. Commented Feb 15, 2016 at 6:15
  • Read about strings in JS Commented Feb 15, 2016 at 6:17
  • This code is setting the background image previewPic.src using CSS. After concatenating the different strings together, the second part will read something like this: url(http://imagelocation/image.jpg). Also have a look at his post, it is doing something similar: stackoverflow.com/questions/21760208/… Commented Feb 15, 2016 at 6:19
  • 2
    We sympathize with your frustration, most of us had to climb a similar learning curve. However, your question is rather unclear (or too broad, if you want to know every detail about the snippet you've posted). Try to narrow down the problem, include any research you've done and alternative pieces of code you've tried. - Alternatively, see if your online course offers some kind of interaction with peers, mentors, or teachers to get a more general explanation of the material. Commented Feb 15, 2016 at 6:19

3 Answers 3

Reset to default
0

Would be better if you break your function into parts like this:

function upDate(previewPic) {
var src = previewPic.src;
var str = 'url(' + src + ')';
document.getElementById('image').style.backgroundImage = str;
}

Once you get better at programming, you can easily write the whole function in one statement. But ideally, you should break down your statements to make it more readable.

Also, in javascript strings there is no difference between single quotes and double quotes.

Hope that answers your question.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Let's break down the code:

function upDate(previewPic)
{
document.getElementById('image').style.backgroundImage = "url" + "("+ previewPic.src+")";
}

The first line is obviously function. The second line is calling to get an element by ID, in this case, it's simply defined as an image. The next part is stating that this is appending the style for the background image of the ID "image." From there, it is actually calling the image to append to the id. It's looking for an image with the same url as the local folder you are in, and with the name "previewPic. Fairly simple line of code. Hope that helps!

Improve this answer

Comments

0 
function setBackground( elemId, previewImage ){
  var el = document.getElementById(elemId),
      bg = "url('" + previewImage.src + "')";

  el.style.backgroundImage = bg;
}

setBackground( 'image', /* previewPic here*/ );
  • The + is used as a string concatenator, which combines multiple strings into one
  • The text inside single or double quotes is considered a string, or text value (e.g., "this is some text")
  • In order to use quotes inside a string, you can escape them with a backslash (e.g. '\'' produces a one character string: ' ) or you can interchange double or single quotes (e.g., "'" also produces the one character string: ' ; or '"' produces " )

Edit:
I was thinking url() must take a quoted string argument (e.g., url('path/to/image.jpg')), but I forgot that was a coding standard we put in place; I think the W3C standard says it's optional

Improve this answer

4 Comments

I think this is the best answer I've gotten so far. What I'm really confused about is why previewImage.src even needs to be in quotes or concatenated with anything else, and why url() needs to be in quotes? Why am I supposed to do a single and then double quote on the inside of the parentheses, then a concatenation (what is being concatenated? I thought concatenation happened OUTside of the quotes?). The concatenation to me is very confusing because I don't understand what is being concatenated in the first place. There is only 1 argument inside those quotes, so why concatenate anything?
@ChrisKH it doesn't need to be in quotes url(path/to/image.jpg) is acceptable. This is what I meant to say in the edit at the bottom. What you're doing is setting literal text to a DOM property. You could manually enter the value as a string el.style.backgroundImage = 'url(path/to/image.jpg)';, but your image (and path) is held in a variable as previewImage.src, thus you need to wrap the contents of that variable with the string: 'url()'. To do this, take the first part 'url(' and add in your variable value + previewImage.src and then add in that closing parentheses + ')'
The main thing is that el.style.backgroundImage is expecting a value as a string. A string is a certain type of data, but as a beginner, you can think of a string being text in quotes. The previewImage.src is not a string, it's a variable, so you need it's string value to be found. What you'll end up with is something like el.style.backgroundImage = 'url(yourImageName.jpg)'; Internally, the browser then recognizes that it's a function (url()) and fully qualifies the contents (http://domainname/path/to/yourImageName.jpg).
The backgroundImage property only accepts 4 possible values as strings 'none', 'initial', 'inherit', or 'url(<your url to image>)'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.