Как я могу заставить кнопку HTML выполнять два разных действия при двух отдельных щелчках?

Question

Я пробовал просматривать ранее заданные вопросы, но все они кажутся слишком сложными для моего уровня, или с использованием jquery, которое я еще не изучил и не понимаю.

Вот что я хочу сделать:

У меня есть это 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"
  }
}

Все, что я хочу сделать, это нажать кнопку, и размер шрифта изменится на 32 пикселя (который РАБОТАЕТ! ), а затем щелкните его еще раз, и размер шрифта изменится НАЗАД на 16 пикселей (ЭТО НЕ РАБОТАЕТ) .

Я подумал о создании сценария JS, который проверяет размер шрифта и изменяет его в зависимости от того, равен ли размер шрифта 16 (в этом случае он делает его 32 , но если это не 16, то будет 16) будет работать.

Мои извинения, я СОВЕРШЕННО НОВИН на javascript, поэтому, если это вообще возможно, направьте меня в место, где можно объяснить, как это сделать это как если бы мне было 5 лет (или объясните это так).

Большое спасибо!

Answer 1

Одиночный знак равенства - это оператор присваивания , а не оператор сравнения. Итак, когда вы делаете:

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 непустые строки правдивые , поэтому "16px" это истина для целей оператора if, поэтому блок "32px" выполняется каждый раз при его вызове.

Answer 2

Вы используете оператор присваивания в инструкции if. Знак Isequal (=) используется для присвоения значения переменной. Используйте двойной знак Isequal (==) для сравнения условия. Три знака Isequal (===) используются для сравнения типа данных, а также значений между переменными.

Попробуйте следующее:

function fontFunction() {
 if (document.getElementById("demo").style.fontSize === "16px") {
  document.getElementById("demo").style.fontSize="32px";
  } else {
  document.getElementById("demo").style.fontSize="16px"
  }
  }

Answer 3

Ваша проблема в том, что вы используете один = для сравнения значений, но один = в 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>

Кроме того, вам действительно не следует использовать встроенные HTML атрибуты событий например 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>