javascript不改变网站的背景(完全初学者)

blpfk2vs 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(126)

我是javascript和编程的新手，我不知道发生了什么，但由于某种原因，背景图像不会随着所选下拉选项的变化而变化。
当我尝试使用控制台输出测试'dropdownClassMenuRead'时，出于某种原因，它显示''。
我总的新的编程和网络开发一般顺便说一句。
超文本：

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

联森：

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;

}

JavaScript

来源：https://stackoverflow.com/questions/75793536/javascript-doesnt-change-background-of-website-total-beginner

2条答案

按热度按时间

mefy6pfw1#

doc.style.backgroundImage需要稍微调整一下，以处理js期望的引号，在url之前使用双引号，在括号内使用单引号。另一种选择是您可以使用模板文字。我在代码中留下了模板文字的注解版本

注意：我更新了你的js，以利用ES6+利用let和箭头函数。这不是必要的-只是建议使用新的js标准 *

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>

赞(0）回复(0）举报 2023-03-21

4ioopgfo2#

正如wouch所指出的，第一个引用的url字符串中的'+'导致了这个错误。
实际上，你可以完全抛弃内部引号，比如url(images/warrior.gif)。
如果您将图像URL保存在value属性中，则可以直接通过value属性获取当前<select>值。

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>

如果你不想要一个额外的值属性，你仍然可以通过使用template literals（例如url(https://picsum.photos/id/${currentImgText}/200/300)）来简化你的脚本，并将图像交换函数移动到改变事件监听器。
这样，您就不需要为当前图像URL提供全局变量。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-03-21

我来回答

javascript不改变网站的背景(完全初学者)

2条答案

相关问题

热门标签

最新问答