Question

＆＃13;

function getNote() {
var textField = document.getElementById('textField').value;
var result = document.getElementById('result');
result.innerHTML = textField; 
} 
var submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click',getNote);

＆＃13;

<html lang="en">
<head>
<div id="wrapper">
  <div class="topnav" id="myTopnav">
  <a href="#home">NoteTaker</a>
 
</div>
<title>Note Taker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></head>
<body id="style">
<div id ="centerField">
<h1> New Note</h1>
<textarea  id="textField"rows="8" cols="70%"  placeholder ="Type Here."></textarea>
<br>
<button type="button" id="submitButton" class="btn btn-warning">Submit Information</button>
</div>
<div id ="leftField" >
 <h2> Saved Notes</h2>
 <p id='result'></p></div>
 <div id="container"></div>

</div>
</div>
</body>
</html>

＆＃13;

我希望每个值都能继续添加到字段中。因此，当我提交测试然后提交帮助时，字段应该同时具有。现在它添加然后替换，现在我很难过。

Answer 1

如果您不想将其删除并继续追加，请使用旧值并将新值添加到其中。

result.innerHTML = result.innerHTML + " " + textField;

＆＃13;

function getNote() {
var textField = document.getElementById('textField').value;
var result = document.getElementById('result');
result.innerHTML = result.innerHTML + " " + textField; 
} 
var submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click',getNote);

＆＃13;

<html lang="en">
<head>
<div id="wrapper">
  <div class="topnav" id="myTopnav">
  <a href="#home">NoteTaker</a>
 
</div>
<title>Note Taker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></head>
<body id="style">
<div id ="centerField">
<h1> New Note</h1>
<textarea  id="textField"rows="8" cols="70%"  placeholder ="Type Here."></textarea>
<br>
<button type="button" id="submitButton" class="btn btn-warning">Submit Information</button>
</div>
<div id ="leftField" >
 <h2> Saved Notes</h2>
 <p id='result'></p></div>
 <div id="container"></div>

</div>
</div>
</body>
</html>

＆＃13;

Answer 2

＆＃13;

$("#submitButton").on("click", function(){
 $("p#result").append($("#textField").val() + "<br/>");
});

＆＃13;

<html lang="en">

<head>
    <title>Note Taker</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body id="style">
  <div id="centerField">
    <h1> New Note</h1>
    <textarea id="textField" rows="8" cols="70%" placeholder="Type Here."></textarea>
    <br>
    <button type="button" id="submitButton" class="btn btn-warning">
    Submit Information
    </button>
  </div>
  <div id="leftField">
    <h2> Saved Notes</h2>
    <p id='result'></p>
  </div>
  <div id="container"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

＆＃13;

Answer 3

您可以使用解决方案https://jsfiddle.net/spf0bt71/1/

＆＃13;

$('#submitButton').click(function(){
	var textField = $('#textField').val();
  $('#result').append(textField, '<br/>'); 
  $('#textField').val('');
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="centerField">
  <h1> New Note</h1>
  <textarea  id="textField"rows="8" cols="70%"  placeholder ="Type Here."></textarea>
  <br>
  <button type="button" id="submitButton" class="btn btn-warning">Submit Information</button>
</div>
<div id ="leftField" >
  <h2> Saved Notes</h2>
   <p id='result'></p>
</div>
<div id="container"></div>

＆＃13;

Answer 4

$('#submitButton').click(function(){
	 $('#result').append($('#textField').val());
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="centerField">
  <h1> New Note</h1>
  <textarea  id="textField"rows="8" cols="70%"  placeholder ="Type Here."></textarea>
  <br>
  <button type="button" id="submitButton" class="btn btn-warning">Submit Information</button>
</div>
<div id ="leftField" >
  <h2> Saved Notes</h2>
   <p id='result'></p>
</div>
<div id="container"></div>

我如何追加结果值？

4 个答案: