Issue
I am trying to get the values from the two input boxes below the "Welcome to Discussion Portal" i.e. input boxes with the ids "textarea_text" and "id2" and put these values on the left side two made tags i.e. 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>```
Solution
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>Answered By - Arezou Saremian
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.