javascript doesn't change background of website (total beginner) - Html

overdev
March 20, 2023
152 views
0 votes
2 Answers

Im new to javascript and programming in general, I don’t know whats going on but for some reason the background image doesn’t change with the change of the selected dropdown option.

When I try to test ‘dropdownClassMenuRead’ with the console output it say ” for some reason.

Im total new to programming and web dev in general btw.

HTML:

<html lang="en">
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="style.css" rel="stylesheet" type="text/css">

            <title>Talent Point Calculator</title>
        </head>

        <body>

              <select id="dropdownClasses">
                <option>warrior</option>
                <option>mage</option>
                <option>paladin</option>
                <option>rogue</option>
              </select>

                    <div id= "graphicElements">
                        <svg id="svgsection" height="540" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        </svg>
                    </div>

            <script src="main.js" defer></script>
                
        </body>

JS:

var dropdownClassMenu = document.getElementById('dropdownClasses')
var dropdownClassMenuRead;

const svg_embed = "http://www.w3.org/2000/svg";



dropdownClassMenu.addEventListener('change',

function()
    {
        ChangeBackgroundImage();
    }
);


function checkingSelectedClassDropdownMenu()
{
  dropdownClassMenuRead = dropdownClassMenu.options[dropdownClassMenu.selectedIndex].text;
  
}

// changes the background according to the class dropdown menu
function ChangeBackgroundImage()
{
  checkingSelectedClassDropdownMenu();
  var doc = document.getElementById('graphicElements');
  doc.style.backgroundImage = 'url(images/ + '+dropdownClassMenuRead+' + .gif)';
  console.log(doc.style.backgroundImage);
}

CSS:

#graphicElements{
  height: 540px;
  width: 600px;
  background-image: url("images/warrior.gif");
  background-repeat: no-repeat;
  background-color: rgb(132,132,132);
  position: absolute;


}

Answers

The doc.style.backgroundImage needs to be adjusted a little to work with the quotes that js expects, with double quotes before the url and a single quote inside the parentheses. An alternative is you could use a template literal. I left a commented version of the template literal in the code

Note: I updated your js to take advantage of ES6+ utilizing let and arrow functions. It’s not necessary – just recommendation to use newer js standards

let dropdownClassMenu = document.getElementById('dropdownClasses')
let dropdownClassMenuRead;
let doc = document.getElementById('graphicElements');

dropdownClassMenu.addEventListener('change', () => {
  changeBackgroundImage();
});

// Get the text of the selected option in #dropdownClasses
const checkingSelectedClassDropdownMenu = () => {
  dropdownClassMenuRead = dropdownClassMenu.options[dropdownClassMenu.selectedIndex].text;
}

// Changes the background according to the class dropdown menu
const changeBackgroundImage = () => {
  checkingSelectedClassDropdownMenu();
  doc.style.backgroundImage = "url('images/" + dropdownClassMenuRead + ".gif')";
  console.log('doc.style.backgroundImage: ', doc.style.backgroundImage);
  
  // Utilizing template literal instead
  // doc.style.backgroundImage = `url('images/${dropdownClassMenuRead}.gif')`;
}

#graphicElements {
  height: 540px;
  width: 600px;
  background-image: url("images/warrior.gif");
  background-repeat: no-repeat;
  background-color: rgb(132, 132, 132);
  position: absolute;
}

<select id="dropdownClasses">
  <option>warrior</option>
  <option>mage</option>
  <option>paladin</option>
  <option>rogue</option>
</select>

<div id="graphicElements">
  <svg id="svgsection" height="540" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
</div>

As pointed out by wouch the ‘+’ within the first quoted url string is causing this error.

Actually you can ditch the inner quotes completely like so url(images/warrior.gif).

If you save image URLs in the value attribute, you could get the current <select> value directly via value property.

const  dropdownClassMenu = document.getElementById("dropdownClasses");
const  doc = document.getElementById("graphicElements");


dropdownClassMenu.addEventListener("change", (e) => {
  let currentImg = e.currentTarget.value;
  doc.style.backgroundImage = `url(${currentImg})`;
});

#graphicElements{
  height: 540px;
  width: 600px;
  background-image: url(https://picsum.photos/id/237/200/300);
  background-repeat: no-repeat;
  background-color: rgb(132,132,132);
  position: absolute;
}

<select id="dropdownClasses">
  <option value="https://picsum.photos/id/237/200/300">warrior</option>
  <option value="https://picsum.photos/id/236/200/300">mage</option>
  <option value="https://picsum.photos/id/235/200/300">paladin</option>
  <option value="https://picsum.photos/id/234/200/300">rogue</option>
</select>

<div id="graphicElements">
  <svg id="svgsection" height="540" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  </svg>
</div>

If you don’t wan an additional value attribute, you could still simplify your script by using template literals e.g. url(https://picsum.photos/id/${currentImgText}/200/300) and move the image swap function to the change event listener.

This way you don’t need global variables for the current image URL.

const dropdownClassMenu = document.getElementById("dropdownClasses");
const doc = document.getElementById("graphicElements");


dropdownClassMenu.addEventListener("change", (e) => {
  let currentImgText = e.currentTarget.options[e.currentTarget.selectedIndex].textContent;
  doc.style.backgroundImage = `url(https://picsum.photos/id/${currentImgText}/200/300)`;
});

// changes the background according to the class dropdown menu
function ChangeBackgroundImage() {
  const dropdownClassMenuRead =
    dropdownClassMenu.options[dropdownClassMenu.selectedIndex].value;
  doc.style.backgroundImage = `url(${dropdownClassMenuRead})`;
  console.log(doc.style.backgroundImage);
}

#graphicElements {
  height: 540px;
  width: 600px;
  background-image: url(https://picsum.photos/id/237/200/300);
  background-repeat: no-repeat;
  background-color: rgb(132, 132, 132);
  position: absolute;
}

<select id="dropdownClasses">
  <option>237</option>
  <option>236</option>
  <option>235</option>
  <option>234</option>
</select>

<div id="graphicElements">
  <svg id="svgsection" height="540" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  </svg>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

javascript doesn't change background of website (total beginner) – Html

Answers