Присваиваем innerText переменной, но она не меняется

ProgramBox

Присваиваем innerText переменной, но она не меняется

Post author:admin
Запись опубликована:12 апреля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь закодировать игру в крестики-нолики с помощью кнопок, и в моем плане я хочу сохранить button.innertext в качестве переменной, чтобы я мог использовать ее для более удобного определения результата игры. Вот код, для простоты я поместил здесь только одну кнопку

 const b1 = document.getElementById("b1");
const b = [b1];
let b1T = b1.innerText;
let xo = true;
show();
function show() {
  for(let i = 0; i < 9; i  ) {
    b[i].addEventListener("click",go)
  }
}
//decide x or o is displayed
function go(event) {
  if(xo) {
    event.target.innerText = "X";
    event.target.disabled = true;
    xo = false; 
  } else {
    event.target.innerText = "O";
    event.target.disabled = true;
    xo = true;
  }
}
function decide() {
if(b1T === "X"){
//do something
}
}

Когда я попытался записать часть в функции decide, я заметил, что b1T не изменил ее значение на «X» или «O», с помощью console.log (b1T) я получил только пустое значение, как я установил в HTML-файле <button id = "b1"><button> , но когда я ввел console.log (b1.innerText), он действительно показал его внутренний текст. Я установил битовую переменную в неправильном месте или что-то еще?

1. Вы выполняете свой код JavaScript после того, как все html-элементы визуализированы?

2. да, я думаю, проблема в том, что я должен объявить b1T внутри функции, а не снаружи. Спасибо

3. Присваивание типа b1T = b1.innerText; не распространяется на будущее, оно установит переменную слева ровно один раз во время ее выполнения, а затем никогда больше, если оно не будет выполнено снова.

4. Я не замечал этого раньше, спасибо, что ответили мне

Ответ №1:

Вместо этого получите текст из вашей кнопки внутри decide функции. Ваша кнопка изменяет свой внутренний текст при ее нажатии, поэтому вам нужно получить самый последний текст (не самый старый).

 function decide() {
 const b1 = document.getElementById("b1");
 if(b1.innerText === "X"){
  //do something
 }
}

Ответ №2:

Это происходит потому, что код в строке номер 2, то есть пусть b1T = b1.innerText, выполняется только во время загрузки страницы. Вам нужно снова установить для этого значение либо «X», либо «O» при обработке событий click.

Ответ №3:

Внутри show() ошибка кода. Ошибка ссылки: не удается найти переменную: b
Как только вышеупомянутая проблема будет исправлена и b [i] заменено на b1, все будет работать нормально.

Пожалуйста, проверьте приведенный ниже фрагмент кода.

 const b1 = document.getElementById("b1");
const btn = document.getElementById("btn");
let b1T = b1.innerText;
let xo = true;
show();
function show() {
  for(let i = 0; i < 9; i  ) {
    b1.addEventListener("click",go)
  }
}
//decide x or o is displayed
function go(event) {
  if(xo) {
    event.target.innerText = "X";
    event.target.disabled = true;
    xo = false; 
  } else {
    event.target.innerText = "O";
    event.target.disabled = true;
    xo = true;
  }
}
function decide() {
if(b1T === "X"){
//do something
}
}

 <body>
  <button id="b1">Click</button>
</body>

Дайте мне знать, соответствует ли это ожиданиям.

Ответ №4:

Мое решение состоит в том, чтобы создать переменную dc для записи количества нажатых кнопок и поместить функцию decide() в функцию go() и объявить b1T внутри функции decide(), чтобы каждый раз, когда я нажимаю на кнопку, она обновляла все переменные, в которых хранится button.innertext. Вот код:

 const b1 = document.getElementById("b1");
const btn = document.getElementById("btn");
let b1T = b1.innerText;
let dc = 0;
let xo = true;
show();
function show() {
  for(let i = 0; i < 9; i  ) {
    b1.addEventListener("click",go)
  }
}
//decide x or o is displayed
function go(event) {
  if(xo) {
    event.target.innerText = "X";
    event.target.disabled = true;
dc  = 1;
    xo = false; 
  } else {
    event.target.innerText = "O";
    event.target.disabled = true;
dc = 1;
    xo = true;
  }
decide();
}
function decide() {
let b1T = b1.innerText;
   if(dc >= 5) {
    if(b1T === "X"){
     //do something
      }
   }
}

Спасибо всем вам, ребята, за усилия