Переменная не будет отображать изменение

ProgramBox

Переменная не будет отображать изменение

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

#javascript #html

Вопрос:

Я делаю интерактивную книгу, и я хочу, чтобы номер страницы был показан, но номер страницы остается 0.

Я изменяю содержимое с помощью функции. Я попытался изменить переменную, вызвав функцию при нажатии кнопки, но номер страницы (переменная «страница») не отображает изменение.

Что происходит не так?

 var page = 0;
document.getElementById('page').innerHTML = "Current page: "   page   " | Enter page number: ";

function f1() {
  document.getElementById('contents').innerHTML = "<p>You are a pet hamster. You are waiting for your owner to come home. What do you want to do in the meantime?</p></br><button type='button' onclick='f2()'>Run in the wheel</button> <button type='button' onclick='f3()'>Eat</button>";
  page = 1;
}

 <div id="contents">
  <h1>Hamster Adventure</h1>
  <button type='button' onclick='f1()'>Start</button>
</div>
</br>
<div id="page"></div>

1. Между html и некоторой переменной нет привязки, поэтому каждый раз, когда переменная изменяется, вам также необходимо обновлять html. Он не будет автоматически обновляться

Ответ №1:

После изменения page переменной вам нужно будет обновить содержимое #page элемента, чтобы отразить новое значение. Вы можете устанавливать его innerHTML при каждом изменении страницы.

 var page;
var pagination = document.getElementById('page');

function setPageNum(page) {
  pagination.innerHTML = "Current page: "   page   " | Enter page number: ";
}

function f1() {
  document.getElementById('contents').innerHTML = "<p>You are a pet hamster. You are waiting for your owner to come home. What do you want to do in the meantime?</p></br><button type='button'>Run in the wheel</button> <button type='button' onclick='f3()'>Eat</button>";
  setPageNum(2);
}

setPageNum(1);

 <div id="contents">
  <h1>Hamster Adventure</h1>
  <button type='button' onclick='f1()'>Start</button>
</div>
<br>
<div id="page"></div>

Кстати, вы могли бы рассмотреть более СУХОЙ метод перехода по страницам.

 var pagination = document.getElementById('page');
var contents = document.getElementById('contents');

var pages = {
  1: "<p>You are a pet hamster. You are waiting for your owner to come home. What do you want to do in the meantime?</p></br><button type='button' onclick='setPage(2)'>Run in the wheel</button> <button type='button'onclick='setPage(2)'>Eat</button>",
  2: "<p>This is step 2.</p></br><button type='button'onclick='setPage(3)'>Something</button> <button type='button' onclick='setPage(3)'>Something Else</button>",
  3: "<p>This is step 3.</p></br><button type='button'onclick='setPage(1)'>This One</button> <button type='button' onclick='setPage(1)'>Another One</button>"
};

function setPage(page) {
  contents.innerHTML = pages[page];
  pagination.innerHTML = "Current page: "   page;
}

setPage(1);

 <div id="contents">
  <h1>Hamster Adventure</h1>
  <button type='button' onclick='f1()'>Start</button>
</div>
<br>
<div id="page"></div>

1. И, возможно, подумайте о делегировании и просто измените текстовое содержимое кнопок и исправьте отображение или скрытие кнопок. Это в сочетании с обработкой внешних событий

2. @mplungjan Согласился!

Ответ №2:

 var page = 0;
document.getElementById('page').innerHTML = "Current page: "   page   " | Enter page number: ";

function f1(val) {
val  = 1;

document.getElementById('contents').innerHTML = "<p>You are a pet hamster. You are waiting for your owner to come home. What do you want to do in the meantime?</p></br><button type='button' onclick='f2()'>Run in the wheel</button> <button type='button' onclick='f3()'>Eat</button>";
document.getElementById('page').innerHTML = "Current page: "   val   " | Enter page number: ";

}

 <div id="contents">
<h1>Hamster Adventure</h1>
<button type='button' onclick='f1(0)'>Start</button>
</div>
</br>
<div id="page"></div>

Ответ №3:

Другие ответы рассказали вам, что не так с вашим кодом.

Изучите это.

В нем должно быть достаточно фрагментов сценария, чтобы помочь вам с вашей книгой

 const pages = [{
"text":"", "choices": [{"page":1,"text":"Start"}]},
  {
  "text": "You are a pet hamster. You are waiting for your owner to come home. What do you want to do in the meantime?",
  "choices" : [{
    "page": 2,
    "text": "Run in the wheel"
  }, {
    "page": 3,
    "text": "Eat"
  }]
},
{
  "text": "You are running in the wheel; what now?",
  "choices" : [{
    "page": 4,
    "text": "Stop and rest"
  }, {
    "page": 5,
    "text": "Run faster"
  }]
}];
let pageNumber = 0;
const pageSpan = document.getElementById("pageSpan");
const textDiv = document.getElementById("textDiv");
const choiceButtons = document.querySelectorAll(".choice")
const changePage = () =>  {
  const page = pages[pageNumber]; console.log(page)
  textDiv.innerHTML = page ? page.text : "You are eaten by a Grue";
  const choices = page ? page.choices : [];
  pageSpan.textContent = pageNumber;
  choiceButtons.forEach((but,i) => {
    but.classList.toggle("hide",!choices[i])
    but.innerText = choices[i] ? choices[i].text : "";
  }); 
};
document.getElementById("gotoPage").max = pages.length;
document.getElementById("contents").addEventListener("click", function(e) {
  const tgt = e.target;
  const page = pages[pageNumber];
  if (page) {
    pageNumber = page.choices[tgt.id==="choice1" ? 0 : 1].page
    changePage();
  }  
})
changePage()
document.getElementById("gotoPage").addEventListener("change", function(e) {
  pageNumber =  this.value;
  changePage()
});

 .hide {
  display: none;
}

#gotoPage {
  width: 10px;
}

 <div id="contents">
  <h1>Hamster Adventure</h1>
  <div id="textDiv"></div>
  <button type='button' class="choice hide" id="choice1"></button>
  <button type='button' class="choice" id="choice2">Start</button>
</div>
<div id="page">Current page: <span id="pageSpan"></span> | Enter page number:<input type="number" min="0" id="gotoPage" /></div>

Метки: Переменная не будет отображать изменение