How to change a label according to a "select" in html + javascript?

Question

How to change a label according to a "select" in html + javascript?

Navigation

#1 by (0 votes)

0

I am learning JavaScript and I need that for example if the user chooses "clothes" the label below changes to "10000" but I try it and it does not work out. How could I do it?

function ShowSelected() { /* Para obtener el valor */
  var cod = document.getElementById("producto").value;
  var txt = document.getElementById("lbl").value;
  alert(cod);
  /* Para obtener el texto */
  var combo = document.getElementById("producto");
  var selected = combo.options[combo.selectedIndex].text;
  alert(selected);
  if (selected == "ropa") {
    document.querySelector('txt').innerText = '10000';
  }
}

<html>

<head>
  <title></title>
</head>

<body>
  <select id="producto" onchange="ShowSelected();" name="producto">
    <option value="ropa">ropa</option>
    <option value="zapatos">zapatos</option>
  </select>
  <label name="lbl" id="lbl"></label>
</body>

</html>

javascript html

asked by Pablo 10.05.2018 в 01:10

source

1 answer

Button with popup does not execute procedure Question about hostings and domains

score 0 · Answer 1

You should put the code in the question and not in the comments, anyway the way to edit the text of an element in js is more or less the following:

var label=document.querySelector('#lbl');
label.textContent='1000';

There are many ways to select an element in js, querySelector is just one of they and there are also many ways to change the content of an element in js and textContent is just one of them.

On the other hand, your code does not run because the select, the label and the script are outside the body. You must put the select and the label in the body and the script must be put in the body or in the head ...

in your scrip you must change this line

document.querySelector('txt').innerText = '10000';

for

document.querySelector('#lbl').innerText = '10000';

since

document.querySelector('txt')

does not select any element.

To learn how to use the selectors you can read the documentation that has mozilla

UPDATE:

so that it runs well this is the code:

            <html> 
            <head> 
                <title></title> 
            </head> 

            <body> 
                <select id="producto" onchange="ShowSelected();" name="producto"> 
                    <option value="ropa">ropa</option> 
                    <option value="zapatos">zapatos</option> 
                </select> 
                <label name="lbl" id="lbl">

                </label> 
                <script src="funcion.js"></script> 

                <script type="text/javascript"> 
                function ShowSelected() { 
                /* Para obtener el valor */
                    var cod = document.getElementById("producto").value; 
                    var txt = document.getElementById("lbl").value; 
                    alert(cod);
                     /* Para obtener el texto */
                    var combo = document.getElementById("producto"); 
                    var selected = combo.options[combo.selectedIndex].text; 
                    alert(selected);
                    if(selected == "ropa") { 
                     document.querySelector('#lbl').innerText = '10000'; 
                    } 
                } 
                </script>
            </body> 

            </html>