Doppelte Einträge werden beim Klicken auf die Schaltfläche

Ich versuche, eine einfache Funktionalität zu erstellen, wo ich ein Textfeld und ein Dropdown-Menü, das positive und negative Begriff enthält. Wenn ich zum Beispiel gut in ein Textfeld schreibe und positiv aus dem Dropdown wähle, sollte das Wort gut zur Positivliste hinzugefügt werden. Es funktioniert, ich bekomme doppelte Einträge und auch ich muss die Liste sortieren, wie ich Werte hinzufügen. Bitte hilf mir; hier ist der Code:Doppelte Einträge werden beim Klicken auf die Schaltfläche

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

Quelle

2016-06-24 shiva

bitte Ich habe aktualisiert Sie verwenden können leicht –

den HTML-Code als auch zu debuggen bitte teilen Überprüfen Sie es und lassen Sie mich wissen, – shiva

erwartete Ergebnis zu erreichen, unter Option bitte

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

Quelle

2016-06-24 18:35:12

Um es in meinem lokalen zu arbeiten, habe ich Formular-Tag entfernt, um die Übermittlung von Formular zu vermeiden ... Sie können die Funktion-myFunction() mit meinem Code ersetzen .. Hoffe das funktioniert für Sie :) –

@sai Vielen Dank. Ich habe eine Frage Sie vergleichen nur den ersten Index mit dem neu eingegebenen Wert. zB wenn ich Apfel dann Katze gebe, sollte es Apfelkatze bt gerade nach Katze sein, wenn ich Beutel einführe, dann sollte es Apfeltaschenkatze sein, aber es zeigt Apfelkatzentasche. Ich meine, in diesem Fall müssen wir das gesamte Array durchlaufen, bis seine Länge korrekt ist. – shiva

ja wir müssen es loop render vorherige LI-Elemente .., die Sie schafft mehr Bedingungen. als Schleife das gesamte Array sortiere dieses Array von Array.sort –

Doppelte Einträge werden beim Klicken auf die Schaltfläche

Antwort

Verwandte Themen