CODEWITHSUNDEEP
javascripthtmlcss
Jake918
Jake918

Reputation: 13

Code not printing to screen

UPDATE Okay, I see that I should not be using "console.log" what is a way to print this to the screen?

I am new to coding, and just need to learn why the console.log is not printing the results of the switch case to the screen. Here is the code:

<form id="form1">
    <p>enter name:  <input name="cpn" type="text" size="20"></form>
    <button onclick="outputname()"> Submit</button></p>

    <script>
    function outputname(){
        var x,name,a,b,answer,y;
        x=document.getElementById("form1").innerHTML;
        y=x.elements["cpn"].value;
    switch(cpn){
        case "LIG007":
            text = "LIG007: Located in the 737 Avionics Cart Drawer 1.  Keyword LIGHT";
            break;

            default:
            text = "CPN NOT FOUND, PLEASE MAKE SURE IT WAS TYPED CORRECTLY."
    }

    console.log(y)

    }
    </script>

Upvotes: 0

Views: 144

Answers (2)

Pankaj Shukla
Pankaj Shukla

Reputation: 2672

function outputname() {
            var x, name, a, b, answer, cpn, text;
            x = document.getElementById("form1").innerHTML;
            cpn = document.getElementById('txtBox').value;
            switch (cpn) {
                case "LIG007":
                    text = "LIG007: Located in the 737 Avionics Cart Drawer 1.  Keyword LIGHT";
                    break;

                default:
                    text = "CPN NOT FOUND, PLEASE MAKE SURE IT WAS TYPED CORRECTLY."
            }
           
            document.getElementById('output').innerHTML = text;

        }
<form id="form1">
        <p>enter name:  <input name="cpn" id="txtBox" type="text" size="20" /></p>
</form>
<button onclick="outputname()"> Submit</button>
<div id="output"></div>

Hopefully now I understand you correctly that you want the output on the browser screen, hence the code above.

Notice few things:

1) You can give an id to the input field and read from it directly.

2) Create a div that would be used to contain output on the browser(screen as per your requirement).

3) declare text as var to avoid global. This is the major source of JS bugs where JS silently creates a global variable(in a non-strict mode).

4) You still need to clean up some of the variables yourself.

Hopefully this helps you moving forward.

Upvotes: 0

Itay Ganor
Itay Ganor

Reputation: 4205

Here's a fix:

  • Note that you used switch(cpn) and did not defined cpn. I recommend to use better variable names that 'x' and 'y'.

  • Plus, you tried to console.log the y variable and not the text.

  • console.log outputs to the browsers log and not to the screen.

function outputname() {
  var x, name, a, b, answer, y;
  x = document.getElementById("form1");
  y = x.elements["cpn"].value;
  switch (y) {
    case "LIG007":
      text = "LIG007: Located in the 737 Avionics Cart Drawer 1.  Keyword LIGHT";
      break;

    default:
      text = "CPN NOT FOUND, PLEASE MAKE SURE IT WAS TYPED CORRECTLY."
  }

  console.log(text)

}
<form id="form1">
    <p>enter name:  <input name="cpn" type="text" size="20"></form>
    <button onclick="outputname()"> Submit</button></p>

Upvotes: 1

Related Questions