how to add an element in <h4> tag through other select option dropdown apart from "value" because I already used it, is It possible?"

Question

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...

Answer 1

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>