如何继续将输入字段的值添加到另一个标签中

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.我正在尝试从“欢迎来到讨论门户”下方的两个输入框中获取值，即带有 ID“textarea_text”和“id2”的输入框，并将这些值放在左侧两个制作标签，即 h2 标签和 p 标签ID 为“addh2_in_col1”和“addp_in_col1”的值正在被添加，但问题是每次我单击提交按钮时它们都会不断更新。 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>```

Answer 1

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>

如何继续将输入字段的值添加到另一个标签中

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-08-16 10:04:13

如何继续将输入字段的值添加到另一个标签中

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-08-16 10:04:13

解决方案1
0 已采纳 2022-08-16 10:04:13