1

Estoy aprendiendo JavaScript y necesito que por ejemplo, si el usuario escoge "ropa" el label de abajo cambie a "10000" pero lo he intentando y no me sale. ¿Cómo podría hacerlo?

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>

0

2 respuestas 2

2

deberías poner el código en la pregunta y no en los comentarios, de todas formas la manera de editar el texto de un elemento en js es mas o menos la siguiente:

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

Hay muchas formas de seleccionar un elemento en js, querySelector es solo una de ellas y tambien hay muchas formas de cambiar el contenido de un elemento en js y textContent es solo una de ellas.


Por otro lado tu código no corre porque el select, el label y el script están por fuera del body. Debes poner el select y el label en el body y el script lo debes poner o en el body o en el head...

en tu scrip debes cambiar esta linea

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

por

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

ya que

document.querySelector('txt')

no selecciona a ningún elemento.

Para aprender a usar los selectores puedes leer la documentación que tiene mozilla

UPDATE:

para que se ejecute bien este es el codigo:

            <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>
4
  • 1
    no me corre no me cambia y eso que cambie las lineas y corregi el error con la ubicacion del script :/
    – Pablo
    el 10 may. 2018 a las 0:44
  • 1
    mira la actualización que le hice a mi respuesta, el código lo ejecute en firefox, trata de editar tu pregunta para que sea más entendible.
    – clay
    el 10 may. 2018 a las 1:30
  • 1
    Muchas Gracias !! colega me ayudaste muchisimo sorry por las molestias
    – Pablo
    el 10 may. 2018 a las 1:46
  • 1
    vale con gusto, acepta la respuesta y como te digo trata de mejorar la pregunta para que a otras personas les pueda servir también
    – clay
    el 10 may. 2018 a las 1:54
2

Yo recomendarías que utilizaras el atributo value de la opción seleccionada en vez de text ya que puedes cambiar el texto para el usuario sin alterar la funcionalidad.

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

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

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

</html>

EDICIÓN

Podrías guardar el valor que vas a mostrar en el label en el valor de la opción del select

function ShowSelected() { /* Para obtener el valor */
  var cod = document.getElementById("producto").value;
  var txt = document.getElementById("lbl").value;  
  /* Para obtener el texto */
  var combo = document.getElementById("producto");
  var selected = combo.options[combo.selectedIndex].value;  
  
    document.getElementById('lbl').innerText = selected;
  
}
<html>

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

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

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.