Here is my JS and 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 to select image src using select/option elements
function setImage(select){
var image = document.getElementsByName("image-swap")[0];
image.src = select.options[select.selectedIndex] .value;
}
Script to change output without altering the value "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');
}
}
I want to know if it is possible to make a function that responds to changes in the slect/options elements to insert the price outside the element, like in the h4 element.
Miles of thanks to every programmer who can clarify my doubts...
If I understand correctly, I think this is what you're trying to do:
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>