title: Updating fields based on selection
body: <p>Been trying to update fields using html select and JavaScript and dropdowns but I can't get it to constantly change
  Here is the code
  Been trying to update fields using html select and JavaScript and dropdowns but I can't get it to constantly change
  Here is the code:</p>
  <pre><code>&lt;div class=&quot;card1&quot;&gt;
  &lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;content&quot;&gt;
      &lt;h2&gt;Fifa 22 &lt;div class=&quot;txt1&quot;&gt;&lt;/div&gt;&lt;/h2&gt;  
      &lt;div class=&quot;select&quot;&gt;
          &lt;select name=&quot;fifa22&quot; id=&quot;editions&quot;&gt;
              &lt;option value=&quot;Ultimate&quot;&gt;Ultimate&lt;/option&gt;
              &lt;option value=&quot;Standard&quot;&gt;Standard&lt;/option&gt;
              &lt;option value=&quot;Legacy&quot;&gt;Legacy&lt;/option&gt;
            &lt;/select&gt;
            &lt;img src=&quot;images/loading.png&quot; id=&quot;loadingpng&quot; alt=&quot;&quot;&gt;
      &lt;/div&gt;
      &lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;Buy Now &lt;div class=&quot;txt2&quot;&gt;&lt;/div&gt;&lt;/a&gt;                
  &lt;/div&gt;
  &lt;img src=&quot;images/fifaPs.jpg&quot; id=&quot;img1&quot; alt=&quot;&quot;&gt;
  </code></pre>
  
  <pre><code>const txt1 = document.querySelector('.txt1');
  const txt2 = document.querySelector('.txt2');
  
  txt1.innerText = 'Ultimate'
  txt2.innerText = '$99.99'
  
  var card = document.getElementById(&quot;editions&quot;);
  var selectedValue = card.options[card.selectedIndex].value;
  
  if (selectedValue == &quot;Ultimate&quot;) {
      txt1.innerText = 'Ultimate'
      txt2.innerText = '$99.99'
  }else if (selectedValue == &quot;Standard&quot;) {
      txt1.innerText = 'Standard'
      txt2.innerText = '$59.99'
  }else if (selectedValue == &quot;Legacy&quot;) {
      txt1.innerText = 'Legacy'
      txt2.innerText = '$79.99'
  }
  </code></pre>