How can I pass a variable from a JS input to HTML?

Question

I'm taking an input from a user in javascript and using it to display that number of pages. Basically, I ask the user how many items they have. If they say, for example, 4, I need to ask them the name of each item on the next page. Then, on the next 4 pages, they are to input the value of each item one per page and finally, I will display a table of the items, values, and final sum. My question is:

After obtaining the number of items in my javascript file, how do I pass it back to my HTML file? Should I even be passing it back to my HTML file?
When I have the number of items, how do I open that many new files/pages for javascript and HTML based on it? Or can I do it all on one js file? I know it's quite redundant to open a new HTML and JS file for each item but I don't know how to clear the page each time after a button click and display a new input box on the same file.

Sorry if this is a really stupid question, just a confused begginer here. Thank you!

Here's what I have so far:

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");
}

Answer 1

I am not 100% sure, but guess You need to dynamically generate N number of inputs to have users fill in names of each item. As mentioned opening new or creating new html files would not be the best solution, also it can't be done with browser javascript.

So instead why not generate input elements and append them to the DOM, for more info please see DOM w3schools

Small example.

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);
    }
}

Let's say user inputs 2. It will generate

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

Also to empty the body - document.body.innerHTML = ""

Answer 2

Probably you can use "pages" (hide all elements except one)

There is an example, you can check it out

 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>

How can I pass a variable from a JS input to HTML?

Question

2 answers

solution1
0 2020-04-30 15:46:19

solution2
0 2020-04-30 15:48:01

How can I pass a variable from a JS input to HTML?

Question

2 answers

solution1 0 2020-04-30 15:46:19

solution2 0 2020-04-30 15:48:01

solution1
0 2020-04-30 15:46:19

solution2
0 2020-04-30 15:48:01