我将如何追加结果值？

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

<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>

我希望每一个值，以保持被添加到该领域。所以，当我提交测试，然后提交帮助字段应该都有。现在它增加，然后替换，现在即时难倒。

来源

2017-07-28 Dwight Carter

result.innerHTML + =文本框 – AirNoir

我认为，这些问题的答案之一可能是解决方案。你可以接受一个引用可能可接受的解决方案的答案。这关闭了循环。 – Sidtharthan

@Sidtharthan听起来就像你在钓鱼接受你的答案。 –

如果您不想追溯它并继续追加，请取旧的值并添加新值。

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

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

<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>

来源

2017-07-28 06:09:19

在这里，你去了一个解决方案https://jsfiddle.net/spf0bt71/1/

$('#submitButton').click(function(){ 
 
\t var textField = $('#textField').val(); 
 
    $('#result').append(textField, '<br/>'); 
 
    $('#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>

来源

2017-07-28 06:12:30 Shiladitya

嘿伊姆仍然在学习，但解决方案完美地在小提琴中工作，但是当我尝试它时，我的自我...使用代码不起作用 –

请检查浏览器控制台错误...并请提供错误的详细信息，将尽量一起解决... – Shiladitya

感谢您的支持，但我能够得到它的工作:) –

$('#submitButton').click(function(){ 
 
\t $('#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>

来源

2017-07-28 06:39:19

.append（）方法插入指定的内容作为最后一个孩子的每个元素。这就是为什么每次textField值都会附加到结果中的原因。.appendTo（）可以用来代替.append（） –

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

<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>

来源

2017-07-28 07:02:12

我将如何追加结果值？

回答

相关问题