单击按钮时会重复输入答案

【问题标题】：Duplicate entries are made on clicking the button单击按钮时会重复输入
【发布时间】：2016-06-24 17:51:07
【问题描述】：

我正在尝试创建一个简单的功能，其中我有一个文本框和一个包含正面和负面术语的下拉菜单。例如，当我在文本框中写好并从下拉列表中选择肯定时，应将“好”一词添加到肯定列表中。它正在工作我得到重复的条目，而且我需要在不断添加值时对列表进行排序。请帮帮我；这是代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var flag = true;
if (x == null || x == "") {
alert("Name must be filled out");
flag = false;
        }
if (x.length > 50) {
alert("Term should not be longer than 50");
flag = false;
}
return flag;
    }
function myFunction() {
var node = document.createElement("LI");
var answer = document.getElementById("selectMe").value;
var textboxvalue = document.getElementById("t1").value;
if (answer == "positive") {
var textnode = document.createTextNode(textboxvalue);
node.appendChild(textnode);
document.getElementById("Positive").appendChild(node);
        } 
else if (answer == "negative") {
var textnode = document.createTextNode(textboxvalue);
node.appendChild(textnode);
document.getElementById("negative").appendChild(node);
        }
    }
</script>
</head>
<body>
<h3> <strong> Javascript Test </strong></h3>
<form name="myForm" id="myForm" method="post">
<table>
<tr>
<td>
<label>Term: </label>
</td>
<td>
<input type="text" name="fname" id="t1"> </td>
</tr>
<br/>
<tr>
<td>
<label> Type:</label>
</td>
<td>
<select name="title" required id="selectMe">
<option value="">Choose:</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
</select>
</select>
</td>
<tr>                
<td>
<button onclick="myFunction()"> Onclick </button>
</td>
</tr>
</table>
</form>
<fieldset>
<legend>See Result in this Section:</legend>
<label> Positive </label>
<ul id="Positive">
</ul>
<label> Negative </label>
<ul id="negative">
</ul>
</fieldset>
<script type="text/javascript">
$("#myForm").submit(function(e) {
e.preventDefault();
if (validateForm()) {
myFunction();enter code here
}
});
</script>
</body>

</html>

【问题讨论】：

请分享HTML代码，方便调试
我已经更新了，请您检查一下并告诉我

标签： javascript jquery forms button html-lists

【解决方案1】：

要达到预期效果，请使用以下选项

function myFunction() {
  var node = document.createElement("LI");
  var answer = document.getElementById("selectMe").value;
  var textboxvalue = document.getElementById("t1").value;
  if (answer == "positive") {
    var textnode = document.createTextNode(textboxvalue);
    node.appendChild(textnode);
    var p = document.getElementById("Positive").childNodes; // child Nodes of positive
    if (p[1]) {
      var preValue = p[1].innerHTML;
      if (preValue > textboxvalue) { // compare with previous positive value to insertbefore or append
        document.getElementById("Positive").insertBefore(node, p[1]);
      } else {
        document.getElementById("Positive").appendChild(node);
      }
    } else {
      document.getElementById("Positive").appendChild(node);
    }
  } else if (answer == "negative") {
    var c = document.getElementById("negative").childNodes; // child Nodes of negative
    var textnode = document.createTextNode(textboxvalue);
    node.appendChild(textnode);

    if (c[1]) {
      var preValue = c[1].innerHTML;
      if (preValue > textboxvalue) { // compare with previous negative value to insertbefore or append
        document.getElementById("negative").insertBefore(node, c[1]);
      } else {
        document.getElementById("negative").appendChild(node);
      }
    } else {
      document.getElementById("negative").appendChild(node);
    }
  }

  //document.body.appendChild(node);
}

http://codepen.io/nagasai/pen/RRKpvm

【讨论】：

为了让它在我的本地工作，我删除了表单标签以避免提交表单......你可以用我的代码替换函数 -myFunction()..希望这对你有用:)
@sai 非常感谢。我有一个问题，您只是将第一个索引与新输入的值进行比较。例如，如果我输入apple then cat 它应该是apple cat bt 就在cat 之后如果我输入bag 那么它应该是apple bag cat 但它显示apple cat bag。我的意思是在这种情况下，我们需要遍历整个数组直到它的长度正确？
是的，我们需要循环渲染之前的 LI 元素 ..这会让你创造更多的条件。 as 循环整个数组按 Array.sort 对该数组进行排序
@sai 你能给我一个粗略的想法吗？我实际上是您用于此功能的功能的新手
@shive，能否请您创建新问题，因为它已被回答，我将检查并更新答案:)