JavaScript isn't displaying what I want in HTML

Question

I am new to both JS and HTML and I am currently working on something. I get no errors in visual studio but I cant seem to figure out where I went wrong. I have search stackoverflow and cant seem to find something that works for me. I have include all my code since I am almost certain I have missed something along the line of the HTML portion

I want it to display the specified case based on what the radio buttons push out on submit, right now I just get undefined

-Thank you for helping me everyone.

<!DOCTYPE html>
<!--HTML5-->

<html>

<!--Headings-->

<head>
  <!--Colors-->
  <title>Risk State Calculator</title>
  <style type="text/css">
    #main-header {
      text-align: center;
      background-color: black;
      color: white;
      padding: 10px;
    }
  </style>
  <style type="text/css">
    #main-article {
      text-align: left;
      background-color: gray;
      color: black;
      padding: 10px;
    }
  </style>
  <style type="text/css">
    #sub-article {
      text-align: left;
      background-color: lightslategray;
      color: black;
      padding: 10px;
    }
  </style>

</head>
<!--Body-->

<body>

  <!--Headings-->
  <header id="main-header">
    <h1>Risk State Calculator</h1>
  </header>
  <!--Paragraph-->
  <article id="main-article">
    <form>
      <fieldset>
        <dv id="Like">
          <legend>
            <h4>Likelihood</h4>
          </legend>

          <input type="radio" name="Likeli" value="0.1" />0.1 <br />
          <input type="radio" name="Likeli" value="0.3" />0.3 <br />
          <input type="radio" name="Likeli" value="0.5" />0.5 <br />
          <input type="radio" name="Likeli" value="0.7" />0.7 <br />
          <input type="radio" name="Likeli" value="0.9" />0.9 <br />

        </dv>
      </fieldset>
      <fieldset id="Con">
        <dv id="Con">
          <legend>
            <h4>Consequence</h4>
          </legend>

          <input type="radio" name="Consq" value="0" />Minimal or no impact <br />
          <input type="radio" name="Consq" value="1" />5% and less <br />
          <input type="radio" name="Consq" value="2" />5-7% <br />
          <input type="radio" name="Consq" value="3" />7-10% <br />
          <input type="radio" name="Consq" value="4" />10% and more <br />
        </dv>
      </fieldset>
      <br />
      <button type="button" onclick="display()">Submit</button>
    </form>
  </article>

  <article id="sub-article">
    <form>
      <fieldset>
        <legend>
          <h4>Risk State</h4>
        </legend>

        <script type="text/javascript">
          function display() {

            const Consq = (document.getElementsByName('Consq').checked);
            var Likeli = (document.getElementsByName('Likeli').checked);
            var Risk;

            switch (Consq) {
              case 0:
                if (Likeli == 0.1)
                  Risk = "Low.1";
                else if (Likeli == 0.3)
                  Risk = "Low.3";
                else if (Likeli == 0.5)
                  Risk = "Low.5";
                else if (Likeli == 0.7)
                  Risk = "Low.7";
                else if (Likeli == 0.9)
                  Risk = "Medium.9";
                break;
              case 1:
                if (Likeli == 0.1)
                  Risk = "Low.2";
                else if (Likeli == 0.3)
                  Risk = "Low.6";
                else if (Likeli == 0.5)
                  Risk = "Low1.0";
                else if (Likeli == 0.7)
                  Risk = "Medium1.4";
                else if (Likeli == 0.9)
                  Risk = "Medium.1.8";
                break;
              case 2:
                if (Likeli == 0.1)
                  Risk = "Low.3";
                else if (Likeli == 0.3)
                  Risk = "Medium.9";
                else if (Likeli == 0.5)
                  Risk = "Medium1.5";
                else if (Likeli == 0.7)
                  Risk = "Medium2.1";
                else if (Likeli == 0.9)
                  Risk = "High2.7";
                break;
              case 3:
                if (Likeli == 0.1)
                  Risk = "Low.4";
                else if (Likeli == 0.3)
                  Risk = "Medium1.2";
                else if (Likeli == 0.5)
                  Risk = "Medium2.0";
                else if (Likeli == 0.7)
                  Risk = "High2.8";
                else if (Likeli == 0.9)
                  Risk = "High3.6";
                break;
              case 4:
                if (Likeli == 0.1)
                  Risk = "Low.5";
                else if (Likeli == 0.3)
                  Risk = "Medium1.5";
                else if (Likeli == 0.5)
                  Risk = "High2.5";
                else if (Likeli == 0.7)
                  Risk = "High3.5";
                else if (Likeli == 0.9)
                  Risk = "High4.5";
                break;
            }
            alert(Risk);
          }
        </script>
      </fieldset>
    </form>
  </article>
</body>

</html>

You need to explain what this is supposed to do and what it's doing wrong. — Barmar, Feb 02 '21 at 19:56
`document.getElementsByName('Consq').checked` is not the way to get the value of the selected radio button. See https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button — Barmar, Feb 02 '21 at 19:58

score 0 · Answer 1 · answered Feb 02 '21 at 19:56

In your case structure you're comparing the value of the LikeLi object, which is saved as a string from a radiobutton element, to a number. Therefore none of the if statements ever come back True and your Risk object is never initialized, hence it coming back as undefined. For all input tags other than type="number" and type="date" the value="" is always a string obj. You have to either compared strings or convert LikeLi into a number.

user12137152 · Answer 2 · 2021-02-02T20:41:43.983

I hope the following helps:-

var Consq = Number (document.querySelector('input:checked[name="Consq"]').value;)
var Likeli = Number(document.querySelector('input:checked[name="Likeli"]').value;)

You need to properly select the radio buttons and then obtain their values. Since they are string and not integers, I have used Number() to convert them to number. If you avoid the conversion, none of your cases would run and it returns undefined.

JavaScript isn't displaying what I want in HTML

2 Answers2