изменить содержимое html на выбранную опцию

Question

Я пытался изменить значение моего product_name на такое, какое оно есть в настоящее время + имя размера, но я не смог этого сделать. Я пытался использовать опцию HTML

Это HTML, и я пытаюсь изменить Продукт Имя в название продукта + любой параметр выбран из параметров. Я пробовал это, но, похоже, это ничего не меняет.

var text = document.getElementById('name');
var drop = document.getElementById('dropdown');
drop.addEventListener('change', function(e) {
  text.value += ' ' + e.target.value;
  //OR ` ${e.target.value}`
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BEGIN PRODUCTS -->
<div class="col-md-4 col-sm-6">
  <div class="sc-product-item thumbnail">

    <div class="caption">
      <h4 id="name" data-name="product_name">Product Name</h4>
      <p data-name="product_desc">Yellow</p>
      <hr class="line">

      <div>
        <div class="form-group">
          <label>Size: </label>
          <select id="dropdown" name="product_size" class="form-control input-sm">
            <option>Iphone 11 6.1</option>
            <option>IPhone 11 Pro 5.8</option>
            <option>Iphone 11 Pro Max 6.5</option>
            <option>Iphone X</option>
            <option>Iphone XS</option>
            <option>Iphone XS Max</option>
            <option>Iphone XR</option>
            <option>Iphone 7</option>
            <option>Iphone 8</option>
            <option>Iphone 7 Plus</option>
            <option>Iphone 8 Plus</option>
            <option>Iphone 6</option>
            <option>Iphone 6s</option>
            <option>Iphone 6 Plus</option>
            <option>Iphone 6s Plus</option>
          </select>
        </div>

Answer 1

Дайте свои JS идентификаторы элементов и измените text.value на text.textContent. Кроме того, убедитесь, что вы заменяете текст каждый раз, а не добавляете к нему (то есть text.textContent = 'Product Name: ' + ...):

var text = document.getElementById('name')
var drop = document.getElementById('dropdown')
drop.addEventListener('change', function(e) {
  text.textContent = 'Product Name: ' + e.target.value
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caption">
  <h4 data-name="product_name" id="name">Product Name</h4>
  <p data-name="product_desc">Yellow</p>
  <hr class="line">

  <div class="form-group">
    <label>Size: </label>
    <select id="dropdown" name="product_size" class="form-control input-sm">
      <option>Iphone 11 6.1</option>
      <option>IPhone 11 Pro 5.8</option>
      <option>Iphone 11 Pro Max 6.5</option>
      <option>Iphone X</option>
      <option>Iphone XS</option>
      <option>Iphone XS Max</option>
      <option>Iphone XR</option>
      <option>Iphone 7</option>
      <option>Iphone 8</option>
      <option>Iphone 7 Plus</option>
      <option>Iphone 8 Plus</option>
      <option>Iphone 6</option>
      <option>Iphone 6s</option>
      <option>Iphone 6 Plus</option>
      <option>Iphone 6s Plus</option>
    </select>
  </div>
</div>