Javascript按钮切换

Question

我试图编写一个JavaScript函数，以便在单击按钮时，所有HTML段落元素“ p”都将突出显示为黄色，然后HTML按钮文本将变为“单击以取消突出显示”（在else语句之前的以下代码为功能齐全，所有段落均突出显示，并且按钮文本更改）。 我正在尝试使用“ location.reload（）;”重新加载页面。 但它似乎不起作用。

 window.onload = function() { var button = document.getElementsByTagName("button"); button[0].onclick = changeBackground; } function changeBackground() { var myParas = document.getElementsByTagName("p"); for (var i = 0; i < myParas.length; i++) { myParas[i].style.backgroundColor = "yellow"; } var firstClick = true; var b = document.getElementById("button"); if (firstClick) { b.innerHTML = "Click to unhighlight"; firstClick = false; } else { location.reload(); firstClick = true; } } 

有关如何正确调用“ location.reload（）;”的任何建议 功能将不胜感激。 提前致谢。

Answer 1

您的主要问题是您有：

var firstClick = true;

在click事件处理程序中，因此每次单击按钮时，它都认为这是第一次单击。 您需要在事件处理程序的外部和内部设置该值，并希望将其设置为与当前值相反的值：

var firstClick = true;

function changeBackground() {
  var myParas = document.getElementsByTagName("p");

  for (var i = 0; i < myParas.length; i++) {
    myParas[i].style.backgroundColor = "yellow";
  }

  var b = document.getElementById("button");

  if (firstClick) {
    b.textContent = "Click to unhighlight";
  } else {
    location.reload();
  }

  firstClick = !firstClick; // Toggle the first click variable
}

---

但是，实际上，无需重新加载文档，只需取消突出显示段落即可。 重新加载会占用更多资源。

避免使用getElementsByTagName()因为它会返回“活动节点列表”，这会影响性能。

此外，与其设置显式的onload事件处理程序，不如将代码放置在HTML body的底部。

最后，使用现代标准进行事件处理（ .addEventListener ），而不要使用事件属性（ onclick ）。

请参阅下面的内联评论：

 // Place all this code inside of a `<script>` element and place that // element at the bottom of the code, just before the closing body tag. let btn = document.querySelector("button"); // Modern, standards-based way to set up event handlers btn.addEventListener("click", changeBackground); function changeBackground() { // Use .querySelectorAll() and convert the results to an array var myParas = Array.prototype.slice.call(document.querySelectorAll("p")); // Loop over all the paragraphs myParas.forEach(function(par){ // Toggle the CSS class to highlight/or unhighlight them par.classList.toggle("highlight"); }); // Set the button text accordingly btn.textContent = myParas[0].classList.contains("highlight") ? "Click to unhighlight" : "Click to highlight"; } 

 .highlight { background-color:yellow; } 

 <p>This is a test</p> <h1>This is a test</h1> <p>This is a test</p> <p>This is a test</p> <div>This is a test</div> <p>This is a test</p> <p>This is a test</p> <button>Click to highlight</button> 

Answer 2

问题在于，永远不会调用else语句，因为每次您将变量设置为true时，“ firstClick”变量始终为true。

为了避免这种情况，只需在方法之外声明变量，例如：

var firstClick=true;
function changeBackground(){
    var myParas = document.getElementsByTagName("p");

    for (var i = 0; i < myParas.length; i++) {
        myParas[i].style.backgroundColor = "yellow";
    }

    var b = document.getElementById("button");

    if (firstClick){
        b.innerHTML = "Click to unhighlight";
        firstClick = false;
    }else{
        location.reload();
        firstClick = true;
    }
}

Answer 3

另一种方法是使用开关盒。

<button id="changeButton">Make my paragraphs Yellow</button>
<script>
var theToggle = document.getElementById("changeButton");
var toggleMe = document.getElementsByTagName("p");
toggleMe.toggleStatus = "on";

theToggle.onclick = function(){
  switch(toggleMe.toggleStatus){
    case "on":
      toggleMe.toggleStatus="off";
      for (var i = 0; i < toggleMe.length; i++) { toggleMe[i].style.backgroundColor = 'yellow'; }     
      theToggle.textContent = "Make my paragraphs White";
      break;
    case "off":
      toggleMe.toggleStatus="on";
      for (var i = 0; i < toggleMe.length; i++) { toggleMe[i].style.backgroundColor = 'white'; }      
      theToggle.textContent = "Make my paragraphs Yellow";
      break;
  }
 }
</script>

希望能解决。