How to use a value as a name of a file?

I’m a newbie in JS. I want to change the background image of a div by using values from tag. I can change the background-color but now I want to use the value as the name of a jpg file. Does anyone know how? The values will be 1,2,3 and the name of the graphic files are 1.jpg, 2.jpg and 3.jpg.

   <div class="container" id="wrapper">
      <form>
        <label for="my-select">Choose the continent:    </label>
        <select
          name=""
          id="my-select"
          value="Choose the continent"
          onChange="myFunction()"
        >
          <option value="default">default</option>
          <option value="1">Asia</option>
          <option value="2">Australia</option>
          <option value="3">South america</option>
        </select>
      </form>
    </div>

  const myWrapper = document.querySelector("#wrapper");

  function myFunction() {
  var x = document.getElementById("my-select").value;
  myWrapper.style.backgroundImage = url("images/x.jpg");
  }
  // I know the last line won't work. 

>Solution :

You were close, try something like this:

  const myWrapper = document.querySelector("#wrapper");

  function myFunction() {
  var x = document.getElementById("my-select").value;
  myWrapper.style.backgroundImage = "url(images/" + x + ".jpg)";
  }

   <div class="container" id="wrapper">
      <form>
        <label for="my-select">Choose the continent:    </label>
        <select
          name=""
          id="my-select"
          value="Choose the continent"
          onChange="myFunction()"
        >
          <option value="default">default</option>
          <option value="1">Asia</option>
          <option value="2">Australia</option>
          <option value="3">South america</option>
        </select>
      </form>
    </div>

If you want even more readable code, you can use template literals instead of string concatenation, like this:

myWrapper.style.backgroundImage = `url(images/${x}.jpg)`;