我想通过单击锚链接来更改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>
答案 0 :(得分:3)
在您的代码中:
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>
希望有帮助
答案 1 :(得分: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>";
}
}
答案 2 :(得分:2)
我改变了
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>
答案 3 :(得分:1)
您的代码没有问题,唯一的问题是您没有使用正确的相等运算符。我只是用“ ==”更改了您的功能,效果很好。
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>";
}
}
答案 4 :(得分:0)
我更喜欢这样:
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>
更简单,更清晰(我认为)