Question

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

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

Answer 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

单击按钮即可复制条目

1 个答案: