Question

我想通过单击锚链接来更改javascript变量，然后根据该变量显示不同的信息。在这里，我单击哪个锚定都没有关系，在两种情况下，innerHTML都会回来说所选的数字是一个。我已经读过有关javascript中的垃圾回收的信息，其中先前分配的变量值将被替换，这似乎是进行此类操作的好方法。除此之外，我遇到的第一个问题是变量似乎没有变化。新手，非常感谢！

<html>
<head>
<style>
    .selectOne {
        font-size: 20px;
    }
    .selectTwo {
        font-size: 20px;
    }
    .displayNumber {
        font-size: 20px;
    }
</style>
</head>
<body>

<a href="#" class="selectOne">Apply One</a>
<br>
<a href="#" class="selectTwo">Apply Two</a>
<div class="displayNumber">Number will display here.</div>

<script>

    const selectOne = document.querySelector(".selectOne");
    const selectTwo = document.querySelector(".selectTwo");
    const displayNumber = document.querySelector(".displayNumber");

    var number;

    function applyNumberOne () {
        number = "one";
    }
    selectOne.addEventListener("click", applyNumberOne);

    function applyNumberTwo () {
        number = "two";
    }
    selectTwo.addEventListener("click", applyNumberTwo);

    function showNumber () {
        if (number = "one") {
            displayNumber.innerHTML = "<p>The number selected was one.</p>";
        } else if (number = "two") {
            displayNumber.innerHTML = "<p>The number selected was two.</p>";
        }
    }
    selectOne.addEventListener("click", showNumber);
    selectTwo.addEventListener("click", showNumber);

</script>
</body>
</html>

Answer 1

在您的代码中：

number = "one"是一项作业

应该是：

number == "one"比较变量number的值
或者number === "one"以更严格地比较变量的type

但是，在您的代码中，您不需要进行比较

代码重构：

function showNumber () {
  displayNumber.innerHTML = `<p>The number selected was ${number}.</p>`;
}

工作代码示例：

const selectOne = document.querySelector('.selectOne');
const selectTwo = document.querySelector('.selectTwo');
const displayNumber = document.querySelector('.displayNumber');

let number;

function applyNumberOne() {
  number = 'one';
}
selectOne.addEventListener('click', applyNumberOne);

function applyNumberTwo() {
  number = 'two';
}
selectTwo.addEventListener('click', applyNumberTwo);

function showNumber() {
  displayNumber.innerHTML = `<p>The number selected was ${number}.</p>`;
}
selectOne.addEventListener('click', showNumber);
selectTwo.addEventListener('click', showNumber);

.selectOne {
  font-size: 20px;
}

.selectTwo {
  font-size: 20px;
}

.displayNumber {
  font-size: 20px;
}

<a href="#" class="selectOne">Apply One</a>
<br>
<a href="#" class="selectTwo">Apply Two</a>
<div class="displayNumber">Number will display here.</div>

这是您代码的新版本，但重构CSS和JavaScript：

const elems = document.querySelectorAll('.selectOne, .selectTwo');
const displayNumber = document.querySelector('.displayNumber');
const getNumberFrom = { selectOne: 'one', selectTwo: 'two' };

elems.forEach(el => el.addEventListener('click', e => displayNumber.innerHTML = `The number selected was ${getNumberFrom[e.target.className]}.`));

.selectOne,
.selectTwo,
.displayNumber {
  font-size: 20px;
}

<a href="#" class="selectOne">Apply One</a>
<br>
<a href="#" class="selectTwo">Apply Two</a>
<div class="displayNumber">Number will display here.</div>

希望有帮助

Answer 2

=运算符将值分配给变量。要比较值，请使用==或===：

function showNumber () {
    if (number == "one") {
        displayNumber.innerHTML = "<p>The number selected was one.</p>";
    } else if (number == "two") {
        displayNumber.innerHTML = "<p>The number selected was two.</p>";
    }
}

Answer 3

我改变了

if (number = "one") {
     displayNumber.innerHTML = "<p>The number selected was one.</p>";
} else if (number = "two") {
     displayNumber.innerHTML = "<p>The number selected was two.</p>";
}

到

if (number === "one") {
     displayNumber.innerHTML = "<p>The number selected was one.</p>";
} else if (number === "two") {
     displayNumber.innerHTML = "<p>The number selected was two.</p>";
}

因为一个=是为变量赋值；而==和===将比较等式两边的变量，这成为if和else if的条件。

    const selectOne = document.querySelector(".selectOne");
    const selectTwo = document.querySelector(".selectTwo");
    const displayNumber = document.querySelector(".displayNumber");

    var number;

    function applyNumberOne () {
        number = "one";
    }
    selectOne.addEventListener("click", applyNumberOne);

    function applyNumberTwo () {
        number = "two";
    }
    selectTwo.addEventListener("click", applyNumberTwo);

    function showNumber () {
        if (number === "one") {
            displayNumber.innerHTML = "<p>The number selected was one.</p>";
        } else if (number === "two") {
            displayNumber.innerHTML = "<p>The number selected was two.</p>";
        }
    }
    selectOne.addEventListener("click", showNumber);
    selectTwo.addEventListener("click", showNumber);

.selectOne {
        font-size: 20px;
    }
    .selectTwo {
        font-size: 20px;
    }
    .displayNumber {
        font-size: 20px;
    }

<html>
<head>
</head>
<body>
<a href="#" class="selectOne">Apply One</a>
<br>
<a href="#" class="selectTwo">Apply Two</a>
<div class="displayNumber">Number will display here.</div>
</body>
</html>

Answer 4

您的代码没有问题，唯一的问题是您没有使用正确的相等运算符。我只是用“ ==”更改了您的功能，效果很好。

     function showNumber () {
    if (number == "one") {
        displayNumber.innerHTML = "<p>The number selected was one.</p>";
    } else if (number == "two") {
        displayNumber.innerHTML = "<p>The number selected was two.</p>";
    }
}

Answer 5

我更喜欢这样：

    const
      selectOne     = document.querySelector(".selectOne"),
      selectTwo     = document.querySelector(".selectTwo"),
      displayNumber = document.querySelector(".displayNumber")
      ;

      function showNumber (e) {
        switch (e.target.className) {
          case 'selectOne' :
              displayNumber.innerHTML = "<p>The number selected was one.</p>";
              break;
          case 'selectTwo' :
              displayNumber.innerHTML = "<p>The number selected was two.</p>";
              break;
        }
    }
    selectOne.onclick = showNumber;
    selectTwo.onclick = showNumber;

<a href="#" class="selectOne">Apply One</a>
<br>
<a href="#" class="selectTwo">Apply Two</a>
<div class="displayNumber">Number will display here.</div>

更简单，更清晰（我认为）

事件处理程序未更改变量。

5 个答案: