How to display customized output based on field values

Issue

So my aim is to create a pop up modal where one could click to enter their regional school code in a text or number field to see if they are eligible for the files posted or not.

for example, if your code is 11002, you should get the recommended message else the apology message also I would like to have a button that can prompt user to go back and enter a new code if the last one is not accepted. This should all be on the same page.

Below is my code so far but I wish to display the result in a span as plain text not as in a field.

<style>
#result {
  width: 100%;
}
#btn1 {
  float: right;
}
</style>

<script>
function locationlookup() {
  var result = document.getElementById("areacode").value;
  var schooling;
  if (result == 11002) {
    schooling = "Great! Your school is eligible for this course";
  } else if (result == 11003) {
    schooling = "Great! Your school is eligible for this course";
  } else if (result == 11004) {
    schooling = "Your school is eligible but you need good conduct certificate";
  } else {
    schooling = "Sorry. we currently do not serve in your entered location";
  }
  document.getElementById("result").value = schooling;
}
</script>

  <table  align="center">
      <tr>
        <th>School Area code: <input type="text" name="areacode" id="areacode" >
          <button onclick="locationlookup()" id="btn1">Lookup</button>
        </th>
    </tr>
    <tr>
      <th>
        <input type="text" name="result" id="result" readonly></th>
        <!-- I wish to change the above field to a span so no limitations. but stuff don't 
work for me -->
    </tr>
</table>

Solution

Maybe something like following snippet:

const input = document.querySelector("#areacode")
const span = document.querySelector("#result")
const btn = document.querySelector("#btnTryAgain")

function locationlookup() {
  const result = input.value;
  let schooling;
  let results = [11002, 11003, 11004]
  if (results.includes(Number(result))) { 
    schooling = "Great! Your school is eligible for this course" 
  } else {
    schooling = "Sorry. we currently do not serve in your entered location"
    btn.classList.toggle('hideBtn')
  }
  span.innerText = schooling;
}

function tryAgain() {
  input.value = ''
  span.innerText = '';
  btn.classList.toggle('hideBtn')
  input.focus()
}
#result {
  width: 100%;
}
#btn1 {
  float: right;
}
.hideBtn {
  display: none;
}
<table align="center">
  <tr>
    <th>School Area code: <input type="text" name="areacode" id="areacode" >
      <button onclick="locationlookup()" id="btn1">Lookup</button>
    </th>
  </tr>
  <tr>
    <th>
      <span id="result"></span>
      <button onclick="tryAgain()" id="btnTryAgain" class="hideBtn btn">Try again</button>
    </th>
  </tr>
</table>

Answered By – Nikola Pavicevic

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.