How do I keep adding the values of my input fields into another tag
Question
I am trying to get the values from the two input boxes below the "Welcome to Discussion Portal" ie input boxes with the ids "textarea_text" and "id2" and put these values on the left side two made tags ie h2 tag and p tag with the ids "addh2_in_col1" and "addp_in_col1" The values are getting added but, the problem is that they keep getting updated every time i click the submit button. I want all the the values keep getting added to there Here is my code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#h1a{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,120,1) 37%, rgba(0,212,255,1) 100%);
color: white;
}
button{
background-color: #0099ff;
height: 48px;
width: 200px;
}
#id1{
height: 45px;
width: 200px;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
textarea{
width: 250px;
height: 100px;
}
</style>
<script>
function function2(){
var a = document.getElementById('id2').value;
document.getElementById("addh2_in_col1").innerHTML = a;
var b = document.getElementById('textarea_text').value;
document.getElementById('addp_in_col1').innerHTML = b;
}
</script>
<div class="row">
<h1 id="h1a">Discussion Portal</h1>
<div class="column">
<button>New Question Form</button> <input id="id1" type="text" placeholder="search questions..." ><br>
<div class="div-2">
<h2 id='addh2_in_col1'></h2>
<p id='addp_in_col1'></p>
</div>
</div>
<div class="column">
<h1>Welcome to Discussion Portal</h1>
<p>Enter a subject and question to get started</p><br>
<input id="id2" type="text" placeholder="subject" ><br><br><br>
<textarea id="textarea_text" placeholder="Question"></textarea><br>
<input type="submit" value="Submit" onclick="function2()">
</div>
</div>
</body>
</html>```
1 answers
solution1
0 ACCPTED 2022-08-16 10:04:13
You replaced your variable each time you clicked. I made it with array and plus
function function2(){ let a = [] let b = [] a.push(document.getElementById('id2').value); a.forEach((item) => { const para = document.createElement("h2"); para.innerHTML += item; document.getElementById("div-2").appendChild(para); }) b.push(document.getElementById('textarea_text').value); b.forEach((item) => { const para = document.createElement("p"); para.innerHTML += item; document.getElementById("div-2").appendChild(para); }) }
#h1a{ background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,120,1) 37%, rgba(0,212,255,1) 100%); color: white; } button{ background-color: #0099ff; height: 48px; width: 200px; } #id1{ height: 45px; width: 200px; } * { box-sizing: border-box; } /* Create two equal columns that floats next to each other */.column { float: left; width: 50%; padding: 10px; height: 300px; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } textarea{ width: 250px; height: 100px; }
<div class="row"> <h1 id="h1a">Discussion Portal</h1> <div class="column"> <button>New Question Form</button> <input id="id1" type="text" placeholder="search questions..." ><br> <div class="div-2" id="div-2"> <h2 id='addh2_in_col1'></h2> <p id='addp_in_col1'></p> </div> </div> <div class="column"> <h1>Welcome to Discussion Portal</h1> <p>Enter a subject and question to get started</p><br> <input id="id2" type="text" placeholder="subject" ><br><br><br> <textarea id="textarea_text" placeholder="Question"></textarea><br> <input type="submit" value="Submit" onclick="function2()"> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how do i get my input to keep adding values
how do I clear the values in my text input fields?
How do i take values of 2 input fields which are numbers, then divide using Jquery and display the result to another input?
How do I add values to input fields using JavaScript?
How do I dynamically sum input values inside a repeatable fields?
How do I use javascript to update the values of hidden input fields
How do you add the values from input fields and update another field with the result in jQuery?
using angularjs, how do I dynamically add an input tag to a form based on the state of another input tag in the same form
How to save the values in existing input fields when adding a new one?
How can i make to reenter my input fields and that my form do not submits?
Related Tags