CODEWITHSUNDEEP
javascripthtmlcssasciiebcdic
sierra117
sierra117

Reputation: 39

Is there a reason this program does not return null values despite explicitly stating it in the code?

I am currently building a site to learn more about how HTML interacts with CSS and JS. My goal is to have the user enter no less than 256 characters (min: 256 characters), select either ASCII or EBCDIC, and then hit the "Run!" button to print out the character string in either ASCII or EBCDIC. I face two challenges: I cannot get the program to return null values (if the string is less than 256 characters in length) despite stating that in the JS file. Additionally, I have written the code to print out ASCII, but have trouble integrating both ASCII and EBCDIC with the radio buttons for the user to select. Below is the code I have written:

function myFunction() {
  let str = document.getElementById("text_id");
  if (str.value == "" && str.length >= 256) {
    str.focus();
    return;
  } else if (str.value == "" && str.length < 256) {
    return null;
  }
  let a = "ASCII Code is == >  ";
  document.getElementById("demo").innerHTML = a + str.value.charCodeAt(0);
}
body {
  font: 12pt Arial;
}

input[type=radio]+label::before {
  border-radius: 10px;
}

input {
  border: 2px solid currentcolor;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:focus {
  background-image: linear-gradient(pink, lightgreen);
}
<body style="text-align:center;">
  <label for="text">Enter a text that is at least 256 characters long</label>
  <input type="text" id="text_id" name="text" minlength="256">

  <p>Select the following:</p>
  <div>
    <input id="ascii" type="radio" name="encoding" value="ascii">
    <label for="ascii">ASCII</label>
  </div>
  <div>
    <input id="ebcdic" type="radio" name="encoding" value="ebcdic">
    <label for="ebcdic">EBCDIC</label>
  </div>
  <button onclick="myFunction()" type="button">"Run!"</button>
  <label for="button">"Run!"</label>
  <p id="demo" style="color:red;">
</body>

I am having trouble understanding why the program returns an ASCII value despite me entering a string length of less than 256. I want to make sure the user can only enter a string length of 256 or above. Also would like to know how I can make sure the user selects a radio button (ASCII or EBCDIC) before submitting their string.

Upvotes: 0

Views: 83

Answers (1)

uingtea
uingtea

Reputation: 6534

your conditions:

  • str.value == "" compare value with empty, did you mean not empty != ?
  • str.length str is html tag and has no length, it should be str.value.length

you need to loop to check if the radio is checked

function myFunction() {
  let str = document.getElementById("text_id");

  // check the radios
  let isRadioChecked = false;
  document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
    if (radio.checked) {
      isRadioChecked = true;
    }
  })
  if (!isRadioChecked) {
    console.log('radio not checked, return');
    return;
  }
  if (str.value.length >= 256) {
    let a = "ASCII Code is == >  ";
    document.getElementById("demo").innerHTML = a + str.value.charCodeAt(0);
    str.focus();
    return;
  } 
  else if (str.value.length < 256) {
    console.log('null');
    return null;
  }


}
body {
  font: 12pt Arial;
}

input[type=radio]+label::before {
  border-radius: 10px;
}

input {
  border: 2px solid currentcolor;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:focus {
  background-image: linear-gradient(pink, lightgreen);
}

encod
<label for="text">Enter a text that is at least 256 characters long</label><br>
<input type="text" id="text_id" name="text" minlength="256">

<p>Select the following:</p>
<div>
  <input id="ascii" type="radio" name="encoding" value="ascii">
  <label for="ascii">ASCII</label>
</div>
<div>
  <input id="ebcdic" type="radio" name="encoding" value="ebcdic">
  <label for="ebcdic">EBCDIC</label>
</div>
<button onclick="myFunction()" type="button">"Run!"</button>
<label for="button">"Run!"</label>
<p id="demo" style="color:red;">

Upvotes: 1

Related Questions