根據文本的值更改文本的顏色，通過帶有 Javascript 的按鈕

Question

我是整個 html、css 和 javascript 世界的新手。 我需要創建一個按鈕，該按鈕根據文本框中寫入的值更改跨度中文本的顏色。

這是我到目前為止設法寫的內容：

 function changeColor() { var span = document.querySelector("span"); if (span = 'purple') { span.style.color = 'purple'; } }

 .color { color: white; background-color: black; } .red { background-color: red; } .blue { background-color: blue; } .yellow { background-color: yellow; } .purple { background-color: purple; }

 <form> <span>This text changes color</span> <div> <input type="text" value="Type your input here"> </div> <div> <input type="button" value="Add Color" onclick="changeColor()"> <input type="button" value="Clear all colors" onclick="ClearColors()"> </div> </form> <script type="text/javascript" src="Homework3.js"></script>

Answer 1

您可以使用文本輸入的值作為類名。 然后，您可以使用classList.add()屬性在span元素上添加類。 您也不需要清除按鈕。 您可以使用classList.remove()屬性在同一函數中刪除該類。

請嘗試以下方式：

 var span = document.querySelector("span"); var prevColor = ''; function changeColor() { var currentColor = document.querySelector("input[type='text']").value.trim(); if(prevColor != '') span.classList.remove(prevColor); if(currentColor != ''){ span.classList.add(currentColor); prevColor = currentColor; } }

 .color { color:white; background-color: black; } .red { background-color: red; } .blue { background-color: blue; } .yellow { background-color: yellow; } .purple { background-color: purple; }

 <span>This text changes color</span> <div> <input type="text" placeholder="Type your input here"> </div> <div> <input type="button" value="Add Color" onclick="changeColor()"> </div>

Answer 2

簡單的解決方案將顏色類別硬編碼到css文件中並不是一個好的設計模式，因為它由用戶確定所需的顏色。 您將通過對顏色進行硬編碼來限制用戶的選擇。 如果用戶鍵入的顏色不在CSS文件中怎么辦？ 鑒於上述情況，我創建了此解決方案：

將輸入標簽中的value屬性更改為占位符，即

From <input type="text" value="Type your input here">
to   <input type="text" placeholder="Type your input here">

從您的html中刪除它。 這不是必需的

<input type="button" value="Clear all colors" onclick="ClearColors()">

將此替換為javascript函數中的代碼

var span = document.querySelector("span");  
  var color = document.querySelector("input").value.trim();  
  span.style.backgroundColor = color;

這是完整的源代碼：

 function changeColor() { var span = document.querySelector("span"); var color = document.querySelector("input").value.trim(); span.style.backgroundColor = color; //If you want to alter the color of text //span.style.color = 'any color'; }

 <head> <title>Inputs and forms</title> </head> <body> <form> <span>This text changes color</span> <div> <input type="text" placeholder="Type your input here"> </div> <div> <input type="button" value="Add Color" onclick="changeColor()"> </div> </form> </body>

注意：不需要CSS

Answer 3

您將使用document.querySelector("span").innerText

根據文本的值更改文本的顏色，通過帶有 Javascript 的按鈕

問題描述

2 個解決方案

解決方案1
2 已采納 2019-03-09 10:38:44

解決方案2
1 2019-03-09 11:57:35

解決方案3
0 2019-03-09 10:34:04

根據文本的值更改文本的顏色，通過帶有 Javascript 的按鈕

問題描述

2 個解決方案

解決方案1 2 已采納 2019-03-09 10:38:44

解決方案2 1 2019-03-09 11:57:35

解決方案3 0 2019-03-09 10:34:04

解決方案1
2 已采納 2019-03-09 10:38:44

解決方案2
1 2019-03-09 11:57:35

解決方案3
0 2019-03-09 10:34:04