Question

我试图通过使用两个变量来定位元素。我知道如何为id做这件事，但我为课程所做的事情似乎并不奏效。有没有人知道我做错了什么？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
    var colour = purple;
    var number = 1;
    function check() {
        var x = document.getElementsByClassName(colour number);
        x[0].innerHTML = "Hello World!";
    }
</script>
</head>
<body>
    <div>Username: </div>
    <input id="test" type="text" onblur="check()">
    <div class="1 purple">one</div>
    <div class="2 red">two</div>
    <div class="3 blue">three</div>
    <div class="4 brown">four</div>
    <div class="5 orange">five</div>
    <div class="6 yellow">six</div>
    <div class="7 white">seven</div>
</body>
</html>

更新

我尝试了两种选择，但似乎都没有效果。这是更新的脚本。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
    function check() {
        var colour = purple;
        var number = one;
        //var x = document.getElementsByClassName(colour + ' ' + number);
        var x = document.querySelector('.' + colour + '.' + number);
        x[0].innerHTML = "Hello World!";
    }
</script>
</head>
<body>
    <input id="test" type="text" onblur="check()">
    <div class="one purple">one</div>
    <div class="two red">two</div>
    <div class="three blue">three</div>
    <div class="four brown">four</div>
    <div class="five orange">five</div>
    <div class="six yellow">six</div>
    <div class="seven white">seven</div>
</body>
</html>

另请注意，这只是一个测试脚本。一旦我开始工作，我会添加更多的div，每个颜色/数字组合一个，所以选择一个类是行不通的。

Answer 1

表达式colour number不是有效的表达式。

要指定类名，您需要一个包含空格分隔类名的字符串，例如"purple 1"。将字符串与它们之间的空格连接起来：

var x = document.getElementsByClassName(colour + ' ' + number);

但是，由于颜色和数字都是唯一的，您只需要查找其中一个：

var x = document.getElementsByClassName(colour);

或：

var x = document.getElementsByClassName(number);

注意：在某些情况下，只有数字的类名可能会有问题。建议类名不以数字开头。

Answer 2

你应该构建一个字符串：

var colour = 'purple';
var number = 1;
var x = document.querySelector('.'+colour+'.'+number);

document.getElementsByClassName（变量）;

2 个答案: