Question

我已经尝试来查看先前提出的问题，但是对于我的水平，或者使用我还没有学过并且不理解的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岁（或以这种方式进行解释）。

非常感谢您！

Answer 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"块每次都会执行这叫做。

Answer 2

您的问题是您正在使用单个=来比较值，但是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>

Answer 3

您在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"
  }
  }

如何使HTML按钮在两次单独单击时执行两项不同的操作？

3 个答案: