尝试获取用户输入(即 hsl(100, 50%, 60%))值并在 div 中显示颜色和值。
我只编码了几个月，而且我对 javascript 很陌生，所以如果这是显而易见的，我提前道歉。
我相信我的函数 hslCode 出了问题。
/* Global variables. */
var newColour;
var newHue;
function hslCode(hue, saturation, lightness) {
return "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)";
}
function init() {
/* Event Handlers */
document.getElementById('choose').onclick = function() {
prompt();
}
document.getElementById('choose').onclick = function() {
newColour = prompt("Please enter a hsl color. For example: hsl(180 50 50)");
newHue = hslCode(newColour);
}
document.getElementById('choose').onclick = function() {
document.getElementById('colourBox').style.backgroundColor = newHue;
document.getElementById('colourBox').innerHTML = newHue;
}
}
window.onload = init;<body>
<h2 id="theOne">Colour Choice</h2>
<p><button id="choose">Click to enter the hue</button></p>
<div id="colourBox"> </div>
</body>最佳答案
有几个问题:
您通过分配三次点击处理程序来覆盖您的点击处理程序；仅使用最后一个。您可能想将它们结合起来(嗯，后两个；第一个没有做任何有用的事情)。
您的
hslCode函数需要并使用三个参数，但这里:newHue = hslCode(newColour);你只传递一个参数。
如果您的意思是让用户输入所有三个并用空格分隔的内容，则需要进行处理，例如:
var parts = newColour.split(" "); newHue = hslCode(parts[0], parts[1], parts[2]);newHue和newColour不需要是全局变量。
更新的代码片段:
function hslCode(hue, saturation, lightness) {
return "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)";
}
function init() {
document.getElementById('choose').onclick = function() {
var newColour = prompt("Please enter a hsl color. For example: hsl(180 50 50)");
var parts = newColour.split(" ");
var newHue = hslCode(parts[0], parts[1], parts[2]);
document.getElementById('colourBox').style.backgroundColor = newHue;
document.getElementById('colourBox').innerHTML = newHue;
}
}
window.onload = init;<body>
<h2 id="theOne">Colour Choice</h2>
<p><button id="choose">Click to enter the hue</button></p>
<div id="colourBox"> </div>
</body>关于javascript - 网页显示提示()输入未定义。我缺少什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43225821/