Error searching for field value - Javascript

Question

I have the following problem:

I have a field that I put a value on input and it analyzes whether the value placed inside is within the switch who is in the Javascript. He’s making the following mistake:

Uncaught Typeerror: Cannot read Property 'value' of null.

The code is as follows::

<input type="text" name="" id="nome" value="">
<button type="button" onclick="myfunction() ">Aperte</button>
<p id="pnome"></p>

var fruta = document.getElementById("nome").value;
function myfunction(){
  switch (fruta) {
    case "Laranjas":
      document.write("As laranjas custam R$0,59 o kg");
      break;
    case "Maçãs":
      document.write("As maçãs custam R$1,50 o kg");
      break;
    case "Bananas":
      document.write("As bannas custam R$3,00 o kg");
    default:
    document.write("Desculpe, estamos sem nenhuma " + fruta + ".");
  }
}
document.getElementById("pnome").innerHTML = "nome: " + fruta;

Answer 1

At the moment the code is executed the element is not yet in the DOM. Change the start of your script for:

function myfunction(){
    var fruta = document.getElementById("nome").value;
...

And the end to:

...
    document.getElementById("pnome").innerHTML = "nome: " + fruta;
}

Answer 2

"Uncaught Typeerror: Cannot read Property 'value' of null"

The above error occurs because you tried to access the property value of an object that does not exist, if you are seeking an element by id as your example, make sure that this element with this id exists at the moment you try to access it.

Follow an example below:

Obs.: I added a if to verify that the field has been completed before the switch.

function myfunction(){
  var fruta = document.getElementById("nome").value;

  if(fruta.length == 0){
    document.write("Preencha o nome da fruta.");
  }
  else{
    switch (fruta) {
      case "Laranjas":
        document.write("As laranjas custam R$0,59 o kg");
        break;
      case "Maçãs":
        document.write("As maçãs custam R$1,50 o kg");
        break;
      case "Bananas":
        document.write("As bannas custam R$3,00 o kg");
      default:
      document.write("Desculpe, estamos sem nenhuma " + fruta + ".");
    }
  }
  
  document.getElementById("pnome").innerHTML = "nome: " + fruta;
}

<input type="text" name="" id="nome" value="" />
<button type="button" onclick="myfunction()">
  Aperte
</button>
<p id="pnome"></p>

Answer 3

In addition to the problems cited in Sorack’s answer, another problem is the document.write. This method replaces the content of the page with the message, right on the line document.getElementById("pnome").innerHTML, the element #pnome will no longer exist and will cause another error:

Uncaught Typeerror: Cannot set Property 'innerHTML' of null

So you can create a variable mensagem which will be concatenated and displayed in div #pnome:

function myfunction(){
   var fruta = document.getElementById("nome").value;
   
   var mensagem;
   
  switch (fruta) {
    case "Laranjas":
      mensagem = "As laranjas custam R$0,59 o kg";
      break;
    case "Maçãs":
      mensagem = "As maçãs custam R$1,50 o kg";
      break;
    case "Bananas":
      mensagem = "As bannas custam R$3,00 o kg";
    default:
      mensagem = "Desculpe, estamos sem nenhuma " + fruta + ".";
  }
  
   document.getElementById("pnome").innerHTML = mensagem+"<br>nome: " + fruta;
}

<input type="text" name="" id="nome" value="">
<button type="button" onclick="myfunction() ">Aperte</button>
<p id="pnome"></p>