Question

好的，我想用JavaScript更改我的网站背景。理想情况下，下拉菜单，但现在，按钮。

这有效：

function selText(test){
            var arr = document.getElementById(test).value;

            if (arr == 1){
            document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
            }
            else if (document.getElementById('btnim2')){
            document.body.style.background = 'none';
          }
      }



 <button id="btnim" value="1" onclick="selText(this.id)">text</button>
 <button id="btnim2" value="2" onclick="selText(this.id)">more text</button>

但是，如果我将'else if'设置为arr == 2且两个按钮具有相同的ID（btnim），则它不起作用，我不知道为什么。我觉得我错过了一些简单的事情。我做错了什么？

Answer 1

如果你使用arr == 2并且id仍然是按钮2的btnim2它仍然可以工作。你不能在网页中拥有许多元素的相同id，因为它会使javascript编译器混淆目标是哪个元素。

function selText(test){
            var arr = document.getElementById(test).value;

            if (arr == 1){
            document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
            }
            else if (arr==2){
            document.body.style.background = 'none';
          }
      }



 <button id="btnim" value="1" onclick="selText(this.id)">text</button>
 <button id="btnim2" value="2" onclick="selText(this.id)">more text</button>

Answer 2

还有另一种方法可以通过传递按钮的值而不是id来使这段代码工作。

<packages>
  <package id="Pidac.HealthCare.Appointment.Model" version="1.0.0.0" targetFramework="net40" />
</packages>

Answer 3

将按钮本身作为参数发送：

<script type="text/javascript">
    function selText(button){
        var arr = button.value;

        if (arr == 1){
            document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
        } else if (arr == 2) {
            document.body.style.background = 'none';
        }
    }
</script>

<button id="btnim" value="1" onclick="selText(this)">text</button>
<button id="btnim2" value="2" onclick="selText(this)">more text</button>

使用JavaScript无法更改网站背景

3 个答案: