Как передать переменную из JS в HTML? - PullRequest
Новая
       5

Как передать переменную из JS в HTML?

0 голосов
/ 30 апреля 2020

Я беру ввод от пользователя в javascript и использую его для отображения этого количества страниц. По сути, я спрашиваю пользователя, сколько предметов у них есть. Если они скажут, например, 4, мне нужно спросить их название каждого элемента на следующей странице. Затем на следующих 4 страницах они должны ввести значение каждого элемента по одному на страницу, и, наконец, я выведу таблицу элементов, значений и итоговой суммы. Мой вопрос:

  1. После получения количества элементов в моем файле javascript, как мне передать его обратно в мой файл HTML? Должен ли я даже передавать его обратно в мой HTML файл?
  2. Когда у меня есть количество элементов, как мне открыть столько новых файлов / страниц для javascript и HTML на его основе? Или я могу сделать все это на одном js файле? Я знаю, что было бы излишним открывать новый файл HTML и JS для каждого элемента, но я не знаю, как очищать страницу каждый раз после нажатия кнопки и отображать новое поле ввода в том же файле.

Извините, если это действительно глупый вопрос, просто сбитый с толку новичок здесь. Спасибо!

Вот что у меня есть:

index. html: 

<body>
    <h1>Welcome!</h1>
    <h2>Ready to track your items?</h2>
    <p><button><a href="items.html">Start</a></button></p>
</body>

items. html: 

<body>
    <h3>How many items do you have?</h3>
    <p><input id="numItems"></p>
    <script src="main.js"></script>
</body>

main. js: 

var numIt = document.getElementById("numItems");
numIt.addEventListener("input", display);

function display(){
    var item = parseFloat(numIt.value);
    alert("you have " + item+" items");
}

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Возможно, вы можете использовать "страницы" (скрыть все элементы, кроме одного)

Есть пример, вы можете проверить это 

const pages = ["page1", "page2", "page3"]
showPage(0)

function hidePages() {
  for(const page of pages)
    changeElementVisibility(page, false)
}

function showPage(num) {
  hidePages()
  
  const pageId = pages[num]
  changeElementVisibility(pageId, true)
}

function changeElementVisibility(id, visible) {
   document.getElementById(id).style.display = visible ? "" : "none"
}

function secondPageSumbit() {
  const itemsCount = document.getElementById("itemsCount").value
  
  document.getElementById("result").innerText = "Items Count: " + itemsCount
}
<head>
  <script src="main.js"></script>
</head>
<body>
    <div id="page1">
      <h1>Welcome!</h1>
      <h2>Ready to track your items?</h2>
      <p><button onclick="showPage(1)">Start</button></p>
    </div>
    <div id="page2">
      <h3>How many items do you have?</h3>
      <p><input id="itemsCount"></p>
      <p><button onclick="secondPageSumbit();showPage(2)">Next</button></p>
    </div>
    <div id="page3">
      <h3>Result</h3>
      <p id="result"></p>
    </div>
</body>
0 голосов
/ 30 апреля 2020

Я не уверен на 100%, но думаю, вам нужно динамически сгенерировать N входных данных, чтобы пользователи заполняли имена каждого элемента. Как уже упоминалось, открытие новых или создание новых файлов html не будет лучшим решением, также это нельзя сделать с помощью браузера javascript.

Так что вместо этого не создавайте элементы ввода и не добавляйте их в DOM. , для получения дополнительной информации см. DOM w3schools

Небольшой пример. 

function display(){
    var item = parseFloat(numIt.value);
    for(var i =0; i<item;i++){
      var inpElem = document.createElement("input");
      inpElem.setAttribute("name", "item"+i);
      inpElem.setAttribute("placeholder", "Input name of the item #"+i);
      document.body.appendChild(inpElem);
    }
}

Допустим, пользовательский ввод 2. Он будет генерировать 

 <input placeholder="Input name of the item #1" name="item1" >
 <input placeholder="Input name of the item #2" name="item2" >

Также для опорожнения тела - document.body.innerHTML = ""

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...