[英]Change paragraph text using select (combo box) input using javascript
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>
element.querySelectorAll('.class-name')
as selector to select all classes with that class nameelement.querySelectorAll('.class-name')
作为选择器来选择具有该类名的所有类.forEach(el => el.command)
command..forEach(el => el.command)
命令的所有元素。 final JS line should be:最后的 JS 行应该是:
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>
Heres a jquery version这是一个 jquery 版本
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.使用该值,我们遍历所有
.cow_color
并使用我们之前获得的值分配颜色,并替换文本。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.