Onchange event does not work in <select>

Asked

Viewed 880 times

0

The event change is not working. It does not change the values (.value) that were placed in the Javascript code:

function trimestre(){
    var op = document.getElementById('tt').Value;
    if(op == 1){
        document.getElementById('vp').value = 18;
        document.getElementById('vt').value = 30;
    }else if(op == 2 || op == 3){
        document.getElementById('np').value = 21;
        document.getElementById('vt').value = 35;
    }
}
<label>Trimestre: </label><select name="trimestre" id="tt" onchange="trimestre()">
  <option value="1">Primeiro</option>
  <option value="2">Segundo</option>
  <option value="3">Terceiro</option>
</select><br><br>
<label>Valor do trimestre: </label><input type="text" readonly id="vt" value="30"><br><br>
<label>Nota para passar: </label><input type="text" name="nota" id="np" readonly value="18"><br><br>

I tested the code of the friend below, but without success also.... I made some changes and also without success... full code: HTML: 

function trimestre(){
var op = parseInt(document.getElementById('tt').value);
var media = 0;
var vT = 0;
if (op == 1){
    media = 18;
    vT = 30;
}else{
    media = 21;
    vT = 35;
}
document.getElementById('np').value = media;
document.getElementById('vt').value = vT;
}

function sit() {
  var op = parseFloat(document.getElementById('n').value);
  var media = parseInt(document.getElementById('np').value);
  var sit = 0;

  if (op < media) {
    sit = "Recuperação";
  } else {
    sit = "Aprovado";
  }
  document.getElementById('s').value = sit;
}

function rec() {
  var rec = document.getElementById('nR').value;
  var media = document.getElementById('np').value;

  if (rec >= media) {
    nF = media;
  } else {
    media = rec;
  }

  document.getElementById('nF').value = media;
}
<!DOCTYPE html>
<html>
<header>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="script.js"></script>
</header>

<body>
  <fieldset>
    <legend>Notas</legend>
    <form id="form1">
      <label>Trimestre: </label>
      <select name="trimestre" id="tt" onchange="trimestre()">
        <option value="1">Primeiro</option>
        <option value="2">Segundo</option>
        <option value="3">Terceiro</option>
      </select><br><br>

      <label>Valor do trimestre: </label>
      <input type="text" readonly id="vt" value="30">
      <br><br>

      <label>Nota para passar: </label>
      <input type="text" name="nota" id="np" readonly value="18">
      <br><br>

      <label>Nota do Aluno: </label>
      <input type="text" name="nota" id="n" placeholder="Insira a nota do aluno" onchange="sit()">
      <br><br>

      <label>Situação: </label>
      <input type="text" name="s" id="s" readonly>
      <br><br>

      <label>Nota do aluno na recuperação: </label>
      <input type="text" name="nr" onchange="rec()" id="nR" placeholder="Insira a nota do aluno na recuperação">
      <br><br>

      <label>Nota final: </label><input type="text" name="nf" id="nF" readonly><br>
    </form>


  </fieldset>
</body>

</html>

PS: All other functions work correctly, only quarter function is not working!

I found out what the mistake was... and it was just the html form, so when I removed it started working.... But I don’t understand why, can someone give a light? VLW

javascript html javascript-events

1 answer

2


How is it possible to check on second line, you are accessing the property Value. The correct is value, since Javascript differs between upper and lower case letters.

Also, you are looking for an element with id np, that doesn’t exist:

getElementById('vp')

The correct, in this case, would be:

getElementById('np')

So, by correcting the problems, we will have:

function trimestre(){
    var op = document.getElementById('tt').value;
    
    if (op == 1) {
        document.getElementById('np').value = 18;
        document.getElementById('vt').value = 30;
    } else if (op == 2 || op == 3) {
        document.getElementById('np').value = 21;
        document.getElementById('vt').value = 35;
    }
}
<label>Trimestre:</label>
<select name="trimestre" id="tt" onchange="trimestre()">
  <option value="1">Primeiro</option>
  <option value="2">Segundo</option>
  <option value="3">Terceiro</option>
</select>

<br><br>

<label>Valor do trimestre:</label>
<input type="text" readonly id="vt" value="30">

<br><br>

<label>Nota para passar:</label>
<input type="text" name="nota" id="np" readonly value="18">

  • kkkkkkk I can’t believe I haven’t seen this capital V... puts old, it’s been about 2 hours just looking for this damn

  • but I just tested it and it’s still not working.... I copied your code and replaced it in mine, and it hasn’t worked yet, but here in the OS when I run it works

  • I edited the answer. The other problem was the element ID. ;)

Browser other questions tagged javascript html javascript-events

You are not signed in. Login or sign up in order to post.