Question

I am trying to take the text from my text input field and use it as a background image. obviously it would need to be a valid URL.

This is my code so far…

CSS:

body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.bgimg {
  background-image:url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg');
}

JavaScript:

$("#SetBG").click(function() {
  var URL = document.getElementById("ImageURL").text();
  $(".bgimg").css('background-image',"url(" +URL +")");
});

HTML:

<input type="text" id="ImageURL"></input>
<button id="SetBG">Set Background</button>

Hopefully someone can help me figure out why this doesn’t work.

Answer 1

The value entered into an <input> element is stored as its value attribute, not the text node it contains (which is what jQuery’s .text() function returns).

Try this:

$("#SetBG").click(function() {
    var URL = document.getElementById("ImageURL").value;
    $(".bgimg").css('background-image',"url(" +URL +")");
});