如何將 JS 輸入中的變量傳遞給 HTML？

Question

我正在從 javascript 中的用戶那里獲取輸入，並使用它來顯示該頁數。 基本上，我會問用戶他們有多少物品。 例如，如果他們說 4，我需要在下一頁詢問他們每個項目的名稱。 然后，在接下來的 4 頁中，他們將每頁輸入每個項目的值，最后，我將顯示項目、值和最終總和的表格。 我的問題是：

在獲得我的 javascript 文件中的項目數后，如何將其傳遞回我的 HTML 文件？ 我什至應該將它傳遞回我的 HTML 文件嗎？
當我有項目數量時，如何基於它為 javascript 和 HTML 打開那么多新文件/頁面？ 或者我可以在一個 js 文件上完成所有操作嗎？ 我知道為每個項目打開一個新的 HTML 和 JS 文件是非常多余的，但我不知道每次單擊按鈕后如何清除頁面並在同一文件上顯示一個新的輸入框。

抱歉，如果這是一個非常愚蠢的問題，這里只是一個困惑的初學者。 謝謝！

這是我到目前為止所擁有的：

索引.html：

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

項目。html：

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

主.js：

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

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

Answer 1

我不是 100% 肯定，但猜測您需要動態生成 N 個輸入以讓用戶填寫每個項目的名稱。 如前所述，打開新的或創建新的 html 文件不是最好的解決方案，也不能使用瀏覽器 javascript 完成。

所以為什么不生成輸入元素和 append 到 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 = ""

Answer 2

可能您可以使用“頁面”（隱藏除一個之外的所有元素）

有一個例子，你可以看看

 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>

如何將 JS 輸入中的變量傳遞給 HTML？

問題描述

2 個解決方案

解決方案1
0 2020-04-30 15:46:19

解決方案2
0 2020-04-30 15:48:01

如何將 JS 輸入中的變量傳遞給 HTML？

問題描述

2 個解決方案

解決方案1 0 2020-04-30 15:46:19

解決方案2 0 2020-04-30 15:48:01

解決方案1
0 2020-04-30 15:46:19

解決方案2
0 2020-04-30 15:48:01