I'm trying to change all instances the word "blue" in a paragraph to another colour based on combo box input; the colour of the word changes to the corresponding input. Not sure what else to try. You can check my attached code.
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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
- You either need an eventListener or an onclick-trigger to run the script.
- you use
element.querySelectorAll('.class-name')
as selector to select all classes with that class name - to apply the changes to all elements you use the
.forEach(el => el.command)
command.
final JS line should be:
document.querySelectorAll('.cow_color').forEach(el => elinnerHTML = 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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Overview
Heres a jquery version
Example
Explination:
we bind to the button, then on click event, we get the value from the dropdown selection. with that value we loop through all .cow_color
and assign the color with the value we got previously and also it replaces the Text.
Code
$(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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>