Javascript кнопка переключения

Question

Я пытаюсь написать функцию javascript, чтобы при нажатии кнопки все элементы абзаца HTML «p» были выделены желтым цветом, а текст кнопок HTML изменится на «Click to unhighlight» (код ниже перед Оператор 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

проблема в том, что предложение else никогда не будет вызываться, потому что переменная firstClick всегда будет иметь значение true каждый раз, когда вы вызываете метод changeBackGround, для которого вы устанавливаете значение переменной 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 2

Другой подход заключается в использовании корпуса переключателя.

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

Надеюсь, что это решить.

Answer 3

Ваша главная проблема в том, что у вас есть:

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>