Question

我应该用JavaScript创建一个HTML文档，它有3个输入（颜色级别）框：红色，绿色和蓝色。它也应该有一个输入按钮。用户将为每个颜色级别框00到FF插入十六进制。一旦用户输入了3组数字，他们点击输入按钮就可以将按钮上文本的颜色更改为他们创建的十六进制编码颜色。

无论我尝试什么，我都可以在HTML页面上获取输入框，并在所有三个框中输入2位数，但按钮上的文本颜色什么都不做。除了我点击按钮，没有任何反应。

＆＃13;

function AddColors() {
  document.getElementById("tColor").style.color = "#,tColor";
  document.getElementById('tFirstNumber').value +
    document.getElementById('tSecondNumber').value +
    document.getElementById('tThirdNumber').value;
}

＆＃13;

<p>Enter two-digit, hexadecimal numbers for the amounts of red, green, and blue light you want </ br> combined to create a color.</p>
<p {style text-align: center;}>Enter the hexadecimal numbers in the boxes below.</p>
<p> Amount of <span style="color:#ff0000;">RED</span>: <input id="tFirstNumber" type="text"></p>
<p> Amount of <span style="color:#00ff00;">GREEN</span>: <input id="tSecondNumber" type="text"></p>
<p> Amount of <span style="color:#0000ff;">BLUE</span>: <input id="tThirdNumber" type="text"></p>
<input type="button" value="Click here to see the color you created" id="tColor" onclick="AddColors()" />

＆＃13;

Answer 1

您的问题是：

您没有设置#变量
您没有在[{1}}

"#,tColor"

您需要在从输入中获取值后设置元素上的值，而您正在以相反的方式执行此操作
您复制了HTML中的ID，ID必须是唯一的

＆＃13;

function AddColors() {
  tColor = document.getElementById('tFirstNumber').value +
    document.getElementById('tSecondNumber').value +
    document.getElementById('tThirdNumber').value;
    console.log(tColor)
  document.getElementById("tColor").style.color = "#" +tColor;
}

＆＃13;

<p>Enter two-digit, hexadecimal numbers for the amounts of red, green, and blue light you want </ br> combined to create a color.</p>
<p {style text-align: center;}>Enter the hexadecimal numbers in the boxes below.</p>
<p> Amount of <span style="color:#ff0000;">RED</span>: <input id="tFirstNumber" type="text"></p>
<p> Amount of <span style="color:#00ff00;">GREEN</span>: <input id="tSecondNumber" type="text"></p>
<p> Amount of <span style="color:#0000ff;">BLUE</span>: <input id="tThirdNumber" type="text"></p>
<p id="tColor">your color</p>
<input type="button" value="Click here to see the color you created" id="tColor" onclick="AddColors()" />

＆＃13;

Answer 2

您的代码有两个id，id必须在整个页面上唯一
您没有设置变量来保存输入值
您对使用字符串和变量感到困惑
您尝试在获取值之前在元素上应用CSS，因此您的脚本尝试应用它甚至不知道的修改

function AddColors() {
  var color =  document.getElementById('tFirstNumber').value +
  document.getElementById('tSecondNumber').value +
  document.getElementById('tThirdNumber').value;
  document.getElementById("tColor").style.color = "#" + color;
}

<p>Enter two-digit, hexadecimal numbers for the amounts of red, green, and blue light you want </ br> combined to create a color.</p>
<p {style text-align: center;}>Enter the hexadecimal numbers in the boxes below.</p>
<p> Amount of <span style="color:#ff0000;">RED</span>: <input id="tFirstNumber" type="text"></p>
<p> Amount of <span style="color:#00ff00;">GREEN</span>: <input id="tSecondNumber" type="text"></p>
<p> Amount of <span style="color:#0000ff;">BLUE</span>: <input id="tThirdNumber" type="text"></p>
<p id="tColor">I'll change my color!</p>
<p id="tFirstNumber"></p>
<input type="button" value="Click here to see the color you created" onclick="AddColors()" />

Javascript根据用户输入更改按钮上文本的颜色

2 个答案: