JavaScript新手问题：下拉菜单切换时网页背景图无法更改

• 下拉菜单选项切换时，graphicElements元素的背景图无法随之更改
• 测试变量dropdownClassMenuRead时，控制台输出为空

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>
</html>

JavaScript #

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;
}

1. 修复背景图路径拼接错误 #

这是导致背景图不更新的核心问题：你把变量和加号都当成了字符串的一部分，生成了url(images/ + warrior + .gif)这种无效路径。修改ChangeBackgroundImage函数里的赋值代码：

// 用ES6模板字符串写法（推荐）
doc.style.backgroundImage = `url(images/${dropdownClassMenuRead}.gif)`;

// 或者传统字符串拼接写法
doc.style.backgroundImage = 'url(images/' + dropdownClassMenuRead + '.gif)';

2. 修正变量取值与调试 #

• 可以简化下拉选中值的获取：因为你的option文本和默认value一致，直接用dropdownClassMenu.value即可，无需遍历options
• 增加日志输出，确认变量是否正确获取：

function checkingSelectedClassDropdownMenu()
{
  dropdownClassMenuRead = dropdownClassMenu.value;
  console.log('选中的职业:', dropdownClassMenuRead); // 新增日志，确认变量值
}

3. 完整修正后的JS代码 #

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

dropdownClassMenu.addEventListener('change', function() {
    ChangeBackgroundImage();
});

function checkingSelectedClassDropdownMenu() {
  dropdownClassMenuRead = dropdownClassMenu.value;
  console.log('选中的职业:', dropdownClassMenuRead);
}

function ChangeBackgroundImage() {
  checkingSelectedClassDropdownMenu();
  var doc = document.getElementById('graphicElements');
  doc.style.backgroundImage = `url(images/${dropdownClassMenuRead}.gif)`;
  console.log('背景图路径:', doc.style.backgroundImage);
}

额外注意事项 #

• 确保images文件夹和HTML文件在同一目录下，且存在对应名称的gif图片（如warrior.gif、mage.gif）
• 注意文件名大小写：如果系统区分大小写，Warrior.gif和warrior.gif会被视为不同文件

内容的提问来源于stack exchange，提问作者overdev