Su código no se actualiza ya que solo se ejecuta una vez. Para que se ejecute cada vez que le suceda algo al elemento seleccionado, debe definir y adjuntar un "controlador de eventos", una función que se ejecuta en respuesta a un evento, como un clic. Hay dos formas de vincular el evento a la función que lo "maneja".

1. En HTML agregándolo como un atributo del elemento seleccionado. Eventos de atributo HTML

 <select onchange="myHandlerFunction">

2. En JS usando el método .addEventListener en el elemento. eventos dom JS

 const card = document.getElementById("editions") card.addEventListener("change", "myHandlerFunction")

• El método 1 es un poco más intuitivo. Está bien para trabajos pequeños y para usar mientras estás aprendiendo.

• El método 2 tiende a preferirse ya que separa las preocupaciones y los idiomas.

A las funciones de controlador se les pasan objetos de evento como sus primeros parámetros. Este objeto contiene una referencia al elemento que desencadenó el evento, por ejemplo

 function myEventHandler(event){ const selectedValue = event.target.value // blah blah blah }

Si sus proyectos comienzan a requerir muchos controladores de eventos, debe buscar 'delegación de eventos' TL; DR usando un controlador de eventos grande en un elemento más arriba en el árbol DOM.

El script JS siempre se ejecuta primero. Entonces, su código en realidad no responde a ningún evento. Necesita una function como detector de eventos para eso. Un event de parámetro siempre se pasa a eventListeners y puede usarlo para obtener el valor que está buscando.

Tenga en cuenta también que el atributo selected se puede utilizar para seleccionar una opción de forma predeterminada. Entonces, no es necesario escribir código para eso en su JS. Mantenlo simple.

 <div class="card1"> <div class="circle"></div> <div class="content"> <h2>Fifa 22 <div class="txt1"></div></h2> <div class="select"> <select name="fifa22" id="editions" onchange="selectChange()"> <option value="Ultimate" selected>Ultimate</option> <option value="Standard">Standard</option> <option value="Legacy">Legacy</option> </select> <img src="images/loading.png" id="loadingpng" alt=""> </div> <a href="#" class="btn">Buy Now <div class="txt2"></div></a> </div> <img src="images/fifaPs.jpg" id="img1" alt="">

 const txt1 = document.querySelector('.txt1'); const txt2 = document.querySelector('.txt2'); txt1.innerText = 'Ultimate' txt2.innerText = '$99.99' var card = document.getElementById("editions"); function selectChange(event) { var selectedValue = event.target.value; if (selectedValue == "Ultimate") { txt1.innerText = 'Ultimate' txt2.innerText = '$99.99' }else if (selectedValue == "Standard") { txt1.innerText = 'Standard' txt2.innerText = '$59.99' }else if (selectedValue == "Legacy") { txt1.innerText = 'Legacy' txt2.innerText = '$79.99' } }