我已经尝试来查看先前提出的问题,但是对于我的水平,或者使用我还没有学过并且不理解的jquery,它们似乎都太复杂了。 / p>
这就是我想要做的:
我有这个html:
<p id="demo">Javascript Test</p>
<button type="button" onclick="fontFunction()">Click Me!</button>
<script src="scripts/lightbulb.js"></script>
并且我有这个JS链接:
function fontFunction() {
if (document.getElementById("demo").style.fontSize = "16px") {
document.getElementById("demo").style.fontSize="32px";
} else {
document.getElementById("demo").style.fontSize="16px"
}
}
我想要做的就是单击按钮,它将字体大小更改为32px (这很有效!),然后再次单击它,并将字体大小更改为BACKBACK to 16px (不起作用)。
我认为制作一个可以检查字体大小并根据字体大小是否为16(在这种情况下,使其为32,但如果不是16则为16)进行更改的JS脚本就可以了。
抱歉,我是javascript的新手,所以请尽可能将我定向到一个可以解释该操作的地方,就像我5岁(或以这种方式进行解释)。>
非常感谢您!
答案 0 :(得分:1)
单个等号是assignment operator,而不是比较运算符。因此,当您这样做时:
if (document.getElementById("demo").style.fontSize = "16px")
您正在分配字体大小,而不进行验证。改用double或triple等于:
if (document.getElementById("demo").style.fontSize === "16px")
仍然可以在第一次点击时使用的原因是javascript赋值表达式返回了新值:
const foo = 4; // assigns foo the value 4, and the expression returns/evaluates to 4
因此,在您的情况下(带有单个等号),您实际测试的是"16px"
,等效于:
if ("16px") {
...
}
在javascript中,非空字符串为truthy,因此就if语句而言,"16px"
为 true ,因此"32px"
块每次都会执行这叫做。
答案 1 :(得分:0)
您的问题是您正在使用单个=
来比较值,但是JavaScript中的单个=
是要分配的,因此您的代码总是求值为true
并进入true
语句的if
分支。相反,请使用==
(与转化比较)或更好的===
(严格比较)来比较值。
但是,执行此操作的非常简单的方法是完全不使用内联样式(这从来都不是理想的方法)或if
语句。只需创建一个CSS类,您就可以使用classList
API来打开和关闭该类:
function fontFunction() {
document.getElementById("demo").classList.toggle("bigger");
}
.bigger { font-size:32px; }
<p id="demo">Javascript Test</p>
<button type="button" onclick="fontFunction()">Click Me!</button>
此外,you really should not be using inline HTML event attributes类似于onclick
。事件绑定应使用JavaScript而不是HTML进行。因此,最好的解决方案是:
// Get DOM references just once
let demo = document.getElementById("demo");
// Do event binding in JavaScript, not HTML
document.querySelector("button").addEventListener("click", fontFunction);
function fontFunction() {
demo.classList.toggle("bigger");
}
.bigger { font-size:32px; }
<p id="demo">Javascript Test</p>
<button type="button">Click Me!</button>
答案 2 :(得分:0)
您在if语句中使用了assign运算符。 Isequal(=)符号用于将值分配给变量。使用双等号(==)符号比较条件。三个等号(===)用于比较数据类型以及变量之间的值。
尝试一下:
function fontFunction() {
if (document.getElementById("demo").style.fontSize === "16px") {
document.getElementById("demo").style.fontSize="32px";
} else {
document.getElementById("demo").style.fontSize="16px"
}
}