Error fetching field value - JavaScript

Question

Error fetching field value - JavaScript

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have the following problem:

I have a field that places a value in a input , and it looks at whether the value placed inside is within the switch that is in JavaScript . It is giving one the following error:

Uncaught TypeError: Can not 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;

javascript html

asked by anonymous 27.04.2018 / 19:10

3 answers

0

"Uncaught TypeError: Can not read property 'value' of null"

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

Here is an example below:

Obs : I added if to check if the field was filled before 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>

27.04.2018 / 19:18

0

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

Uncaught TypeError: Can not set property 'innerHTML' of null

So you can create a mensagem variable that 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>

27.04.2018 / 19:31

Add values to a deserialized JSON object attribute in Javascript Is it possible to replace the JavaScript language with Python in web development?

score 1 · Accepted Answer

At the time the code is run the element is not yet in DOM . Change the start of your script to:

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

And the end for:

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