Aquí está mi JS y HTML:
<div class="col-2"> <p> Small Frame</p> <h1>Name of Frame1</h1> <h4 id='out'></h4> <select id='rename' onchange="setImage(this);"> <option disabled selected value>--Opciones--</option> <option id='frame' value="../assets/8.png">Frame</option> <option id='noframe' value="../noframe/8.png">No Frame</option> </select> </div>Script para seleccionar la imagen src usando elementos de selección/opción
function setImage(select){ var image = document.getElementsByName("image-swap")[0]; image.src = select.options[select.selectedIndex] .value; }Script para cambiar la salida sin alterar el valor "img.src"
$('#rename').on('change', getContent); function getContent(e){var opt = this.value; if (opt === 'frame'){ $('#out').html('<h4>$/.50.00</h4>'); } else { //(opt === 'noframe') $('#out').html('<h4>$/.40.00</h4'); } }Quiero saber si es posible hacer una función que responda a cambios en los elementos slect/options para insertar el precio fuera del elemento, como en el elemento h4.
Millas de gracias a todo programador que pueda aclarar mis dudas...
Si entiendo correctamente, creo que esto es lo que estás tratando de hacer:
const myH4 = document.getElementById("my-h4"), mySelect = document.getElementById("my-select"), myImg = document.getElementsByName("my-img")[0]; mySelect.addEventListener("change", getContent); function getContent(){ const opt = mySelect.options[mySelect.selectedIndex]; myH4.textContent = (opt.id==="frame") ? "$50.00" : "40.00"; myImg.src = opt.value; myImg.nextElementSibling.textContent = ` <<< src="${opt.value}"`; // (For demo) } img{ width: 50px; height: 50px; margin-top: 10px; } <h4 id=my-h4>$0.00</h4> <select id="my-select"> <option disabled selected>--Opciones--</option> <option id='frame' value="../assets/8.png">Frame</option> <option id='noframe' value="../noframe/8.png">No Frame</option> </select> <div> <img name="my-img" /> <span></span> </div>