Question

所以我不知道如何做到这一点，我只是想让别人告诉我如何做以下事情，因为我已经尝试了几个小时，没有任何事情与我合作，所以如果有人可以帮助我，我会真的很感激它们。

我想添加一个JavaScript事件处理程序，以便在单击该按钮时将提示用户输入颜色，并且根据用户输入的颜色代码，该框的颜色会根据用户输入而改变。

<script>
var newColor;

function init()
{

    /* Event Handlers */

    document.getElementById('choose').onmouseover = function()
    {
        document.getElementById('choose').style.backgroundColor = "red";
        document.getElementById('choose').style.opacity = "1.0";
    }
    document.getElementById('choose').onmouseout = function()
    {
        document.getElementById('choose').style.opacity = "0.5";
    }
}
window.onload = init;
</script>

style>
body {
    font: 1.2em Verdana, sans-serif;
}
#choose {
	font-size: 1.2em;
	padding: 0.5em;
}
#colorBox {
    text-align: center;
    font-size: 1.5em;
    color: white;
}
</style>

 

<body>
    <h2 id="theOne">Colour Choice</h2>

    <p><button id="choose">Click to enter a colour (code) </button></p>

    <div id="colorBox"> </div>
    
</body>

Answer 1

使用EventListener并倾听click而不是mouseover，并使用Prompt获取用户输入的内容，然后将style设置为：

＆＃13;

let box = document.querySelector('#colorBox')

document.querySelector('#choose').addEventListener('click', function() {
  let color = prompt('enter color : ')
  box.style.backgroundColor = color
  box.innerText = color
});

＆＃13;

body {
  font: 1em Verdana, sans-serif;
}

#choose {
  font-size: 1em;
  padding: 0.2em;
}

#colorBox {
  text-align: center;
  font-size: 1.5em;
  color: white;
  width: 100%;
  padding: 10px 0;
}

＆＃13;

<h2 id="theOne">Colour Choice</h2>

<p><button id="choose">Click to enter a colour (code) </button></p>

<div id="colorBox"> </div>

＆＃13;

如何添加JavaScript事件处理程序，以便在单击按钮时将提示用户输入颜色？

1 个答案: