Javascript: reload page upon change event

Applications Programming
1

I have some Javascript that should only display the record from a file if the input field matches with one of the record fields:

<head>
<script src="cswr.js"></script>
</head>

Intensity: <input type="text" name="intensity" id="intensity" list="intensitylist">
<datalist id="intensitylist">
  <option value="Heavy">
  <option value="Medium">
  <option value="Light">
</datalist>

<script>
document.getElementById("intensity").addEventListener("onchange", location.reload.bind(location)); 
i = 1;
document.writeln("<table>");
for (var c in cswr) { 
  if (document.getElementById("intensity").value === cswr[c][1]) {
    document.write("<tr><td>" + i++ + "</td><td><ul><li>Occurrence: " + c + "</li><li>Rating: " + cswr[c][0] + "</li>");
    if (typeof cswr[c][1] != 'undefined') document.write("<li>Intensity: " + cswr[c][1] + "</li>");
    document.writeln("</ul></td></tr>");
  }
}
document.writeln("</table>");
</script>

The cswr.js file is as follows:

var cswr = {};
cswr['A'] = [5, 'Medium'];
cswr['B'] = [9, 'Medium'];
cswr['C'] = [8, 'Heavy'];
cswr['D'] = [7, 'Heavy'];
cswr['E'] = [7, 'Medium'];
cswr['G'] = [6, 'Light'];
cswr['H'] = [6];

I am looking to refresh the page upon change of the input field, but the user has to press Refresh in the browser for the changes to take effect. How do I change the code so that the page displays the relevant records for when the field loses focus or when the user presses Return?

Note: not too concerned about doctypes, well-formedness, input validation and the such.

2

@technossomy , you were almost there, a few minor changes/tweaks , you need to test ..

NB: note file name changes .... (coz that's how i roll(ed) this

cat technossomy.js
var cswr = {};
cswr['A'] = [5, 'Medium'];
cswr['B'] = [9, 'Medium'];
cswr['C'] = [8, 'Heavy'];
cswr['Z'] = [6, 'Light'];
cswr['D'] = [7, 'Heavy'];
cswr['I'] = [16,'UltraHeavy'];
cswr['E'] = [7, 'Medium'];
cswr['G'] = [6, 'Light'];
cswr['H'] = [6];

cat technossomy.html
<html>
<head>
  <script src="technossomy.js"></script>
</head>
<body>

Intensity: <input type="text" name="intensity" id="intensity" list="intensitylist">
<datalist id="intensitylist">
  <option value="Heavy">
  <option value="UltraHeavy">
  <option value="Medium">
  <option value="Light">
  <option value="undefined">
</datalist>

<table id="CSWR"></table>

<script>

// change not onchange !
// no need to use writeln, apply output directly to the cswrtable element
document.getElementById("intensity").addEventListener("change", function() 
{
  var intensity = document.getElementById("intensity").value;
  var cswrTable = document.getElementById("CSWR");
  cswrTable.innerHTML = ""; // Clear table if any
  
  var i = 1;
  for (var c in cswr) { 
    if (cswr[c][1] === intensity) {
      var row = "<tr><td>" + i++ + "</td><td><ul><li>Occurrence: " + c + "</li><li>Rating: " + cswr[c][1] + "</li>";
      if (typeof cswr[c][1] !== 'undefined') {
        row += "<li>Intensity: " + cswr[c][1] + "</li>";
      }
      row += "</ul></td></tr>";
      cswrTable.insertAdjacentHTML('beforeend', row);
    }
  }
}
);
</script>

</body>
</html>
1 Like
3

Thanks, that works.

1 Like