shiva shiva - 5 months ago 18
HTML Question

Sorting logic for arranging a list

I have made some changes with sorting because previous logic was just comparing the current value with the first index value. I am trying to compare with all the values.

Please go through the sorting logic I have just written for if a value is positive and
kindly guide me with it.




<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
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
//sorting logic
var p1= new array(100);
p1= document.getElementById("Positive").childNodes;
var i;
var len= p1.length;
for(i=0;i<len;i++){
var preValue = p[i].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);
}

</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();
}
});
</script>
</body>

</html>

Answer

Loop through the array of child elements and compare each element and insertBefore or append the element

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]) {
      for (var i = 0; i < p.length; i++) {
        alert(i);
        var preValue = p[i].innerHTML;
        if (preValue > textboxvalue) { // compare with previous positive value to insertbefore or append
          document.getElementById("Positive").insertBefore(node, p[i]);
          break;
        } 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]) {
      for (var i = 0; i < c.length; i++) {
        alert(i);
        var preValue = c[i].innerHTML;
        if (preValue > textboxvalue) { // compare with previous negative value to insertbefore or append
          document.getElementById("negative").insertBefore(node, c[i]);
          break;
        } else {
          document.getElementById("negative").appendChild(node);
        }
      }
    } else {
      document.getElementById("negative").appendChild(node);
    }
  }

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

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