时间戳

首页 > 解决方案 > 事件处理程序没有更改变量。

javascript - 事件处理程序没有更改变量。

问题描述

我想通过单击锚链接来更改 javascript 变量，然后根据该变量显示不同的信息。在这里，我单击哪个锚点并不重要，在这两种情况下，innerHTML 都会返回说选择的数字是 1。我已经阅读了 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>

标签： javascripthtmlcss

解决方案

在您的代码中：

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

希望能帮助到你

推荐阅读