Question

0

280

Views

Cambie el texto del párrafo usando la entrada de selección (cuadro combinado) usando javascript

Estoy tratando de cambiar todas las instancias de la palabra "azul" en un párrafo a otro color según la entrada del cuadro combinado; el color de la palabra cambia a la entrada correspondiente. No estoy seguro de qué más probar. Puedes consultar mi código adjunto.

 document.querySelector(document).ready(function() { var button = document.querySelector("button_change"); document.querySelector(button).click(function() { var select = document.querySelector("input_color").value; var element = document.querySelector(".cow_color"); document.querySelector(element).html(inputValue); }); });

 <h2> <span class="cow_color">Blue</span> Cow by Gelett Burgess (published in The Lark, 1895) </h2> <p> I never saw a <span class="cow_color">Blue</span> Cow, I never hope to see one; But I can tell you, anyhow, I'd rather see than be one. </p> <p> Change the cow's color to: <select id="input_color"> <option value="Purple">Purple</option> <option value="Green">Green</option> <option value="Red">Red</option> <option value="Yellow">Yellow</option> <option value="Teal">Teal</option> </select> <button id="button_change">Change!</button> </p>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T10:50:40.851Z

Necesita un eventListener o un onclick-trigger para ejecutar el script.
utiliza element.querySelectorAll('.class-name') como selector para seleccionar todas las clases con ese nombre de clase
para aplicar los cambios a todos los elementos, use el .forEach(el => el.command) .

La línea JS final debe ser:

document.querySelectorAll('.cow_color').forEach(el => el.innerHTML = document.querySelectorAll('#input_color').value;);

 function changeColor() { var inputValue = document.querySelector('#input_color'), cowColor = document.querySelectorAll('.cow_color'); cowColor.forEach(el => el.innerHTML = inputValue.value); }

 <h2> <span class="cow_color">Blue</span> Cow by Gelett Burgess (published in The Lark, 1895) </h2> <p> I never saw a <span class="cow_color">Blue</span> Cow, I never hope to see one; But I can tell you, anyhow, I'd rather see than be one. </p> <p> Change the cow's color to: <select id="input_color"> <option value="Purple">Purple</option> <option value="Green">Green</option> <option value="Red">Red</option> <option value="Yellow">Yellow</option> <option value="Teal">Teal</option> </select> <button id="button_change" onclick="changeColor()">Change!</button> </p>

Answer 2 · 2022-07-10T10:50:40.858Z

Visión general

Aquí hay una versión jquery

Ejemplo

Explicación:

nos vinculamos al botón, luego, al hacer clic en el evento, obtenemos el valor de la selección desplegable. con ese valor recorremos todo .cow_color y asignamos el color con el valor que obtuvimos anteriormente y también reemplaza el Texto.

Código

 $(document).on('click', '#button_change', (element) => { let color = $('#input_color').val(); let spans = $('.cow_color'); spans.map(function() { $(this).css('color', color); $(this).html(color); }); return; });

 <!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Body --> <h2> <span class="cow_color">Blue</span> Cow by Gelett Burgess (published in The Lark, 1895) </h2> <p> I never saw a <span class="cow_color">Blue</span> Cow, I never hope to see one; But I can tell you, anyhow, I'd rather see than be one. </p> <p> Change the cow's color to: <select id="input_color"> <option value="Purple">Purple</option> <option value="Green">Green</option> <option value="Red">Red</option> <option value="Yellow">Yellow</option> <option value="Teal">Teal</option> </select> <button id="button_change">Change!</button> </p>

0

280