Javascript Onmouseover（）和Onmouseout（）不工作_Javascript_Html

Javascript Onmouseover（）和Onmouseout（）不工作

javascript html

Javascript Onmouseover（）和Onmouseout（）不工作,javascript,html,Javascript,Html,当我将鼠标悬停在取消栏上时，它不会执行onmouseover和onmouseout命令。更糟糕的是，它本身不会执行任何命令。你是怎么解决的 <!DOCTYPE html> <html> <head></head> <body style="background-image: url(https://img.michaels.com/L6/3/IOGLO/852866719/201341423/10151236.jpg? fit=insi

当我将鼠标悬停在取消栏上时，它不会执行onmouseover和onmouseout命令。更糟糕的是，它本身不会执行任何命令。你是怎么解决的

  <!DOCTYPE html>
<html>
<head></head>
<body style="background-image: 
url(https://img.michaels.com/L6/3/IOGLO/852866719/201341423/10151236.jpg? fit=inside|1024:1024);">
<button onclick="executeCommand()" style="border: 0; background: 0;"><img 
src="https://image.flaticon.com/icons/svg/54/54527.svg" style="padding: 5px 
0px 0px 0px; width: 40px; height: 40px;"></button><div id="search"></div>
<br>  
<script>
function executeCommand(){
document.getElementById("search").innerHTML = "<input type='text' aria- 
label='Search...' placeholder='Search...' value='' id='fx' style='padding: 10px 
50px 10px 5px; background-color: #33333366; border: 0'></input><button 
onclick='deletes()' style='padding: 10px 5px 10px 5px; border: 
0;'>Cancel</button><button onclick='entre()' style='padding: 10px 5px 10px 5px; 
border: 0; background-color: #77bbffff;'>Enter</button><button 
onclick='unsrch()' style='padding: 0px 4px 2px 4px; border-color: #ff0000ff; 
background-color: #e3e3e3ff; color: #ff0000ff; text-decoration: bold;' 
id='hoverover'><b>x</b></button>";
}
function deletes(){
document.getElementById("fx").value="";
}
function entre(){

}
function unsrch(){
document.getElementById("search").innerHTML = "";
}
document.getElementById("hoverover").onmouseover = function() {mouseOver()};
function mouseOver(){
document.getElementById("hoverover").style.background-color = "#555555ff";
}
document.getElementById("hoverover").onmouseout = function() {mouseOut()};
function mouseOut(){
document.getElementById("hoverover").style.background-color = "#e3e3e3ff";
}
</script>
</body>
</html>




函数executeCommand（）{
document.getElementById（“搜索”）.innerHTML=“CancelEnterx”；
}
函数deletes（）{
document.getElementById（“fx”）.value=“”；
}
函数entre（）{
}
函数unrch（）{
document.getElementById（“搜索”）.innerHTML=“”；
}
document.getElementById（“hoverover”）.onmouseover=function（）{mouseOver（）}；
函数mouseOver（）{
document.getElementById（“悬停”）.style.background-color=“#555555 ff”；
}
document.getElementById（“hoverover”）.onmouseout=function（）{mouseOut（）}；
函数mouseOut（）{
document.getElementById（“悬停”）.style.background-color=“#e3ff”；
}

在javascript中，您必须在以下情况下键入css属性：

document.getElementById("hoverover").style.backgroundColor = "#e3e3e3ff";

代码的另一个问题是：

在

execudeCommand（）

函数中生成一个元素，但在该元素存在之前初始化

document.getElementById（“hoverover”）

的mouseevents。在将元素添加到dom后，必须创建一个委托给mouseover/mouseout侦听器，如下所示：

function executeCommand() {
    document.getElementById("search").innerHTML = "<input type='text' aria- label='Search...' placeholder='Search...' value='' id='fx' style='padding: 10px 50px 10px 5px; background-color: #33333366; border: 0'/>";
    document.getElementById("search").innerHTML += "<button onclick='deletes()' style='padding: 10px 5px 10px 5px; border: 0;'>Cancel</button>";
    document.getElementById("search").innerHTML += "<button onclick='entre()' style='padding: 10px 5px 10px 5px; border: 0; background-color: #77bbffff;'>Enter</button>";
    document.getElementById("search").innerHTML += "<button onclick='unsrch()' style='padding: 0px 4px 2px 4px; border-color: #ff0000ff; background-color: #e3e3e3ff; color: #ff0000ff; text-decoration: bold;' class='hoverover-class'><b>x</b></button>";

    var buttons = document.querySelectorAll('.hoverover-class');

    for(var i = 0; i < buttons.length; i++) {
        buttons[i].onmouseover = mouseOver;
        buttons[i].onmouseout = mouseOut;
    }
}

function mouseOver(){
    this.style.backgroundColor = "#555555ff";
}

function mouseOut(){
    this.style.backgroundColor = "#e3e3e3ff";
}
executeCommand();

函数executeCommand（）{
document.getElementById（“搜索”）.innerHTML=“”；
document.getElementById（“搜索”）.innerHTML+=“取消”；
document.getElementById（“搜索”）.innerHTML+=“输入”；
document.getElementById（“搜索”）.innerHTML+=“x”；
var buttons=document.querySelectorAll（'.hoverover类'）；
对于（变量i=0；i


最后一件事：如果创建多个元素，请尽量避免使用id=”“
属性。您可以使用document.querySelector（）
，如上例所示：
这是您的代码，但经过编辑，可以实现您想要的功能
<!DOCTYPE html>
<html>

<head></head>

<body style="background-image: url(https://img.michaels.com/L6/3/IOGLO/852866719/201341423/10151236.jpg?%20fit=inside|1024:1024);">
    <button onclick="executeCommand()" style="border: 0; background: 0;">
        <img src="https://image.flaticon.com/icons/svg/54/54527.svg" style="padding: 5px 0px 0px 0px; width: 40px; height: 40px;">
    </button>
    <div id="search"></div>
    <br>
    <script>
        function executeCommand() {

           document.getElementById("search").innerHTML = "<input type='text' \
           aria-label = 'Search...' placeholder = 'Search...' value = '' id = 'fx' style = 'padding: 10px 50px 10px \
           5px; background - color: #33333366; border: 0'></input>\
           <button onclick = 'deletes()' style = 'padding: 10px 5px 10px 5px; border: \
            0; '>Cancel</button><button onclick='entre()' style='padding: 10px 5px 10px 5px;\
            border: 0; background - color: #77bbffff; '>Enter</button><button \
            onclick = 'unsrch()' style = 'padding: 0px 4px 2px 4px; border-color: #ff0000ff; \
            background - color: #e3e3e3ff; color: #ff0000ff; text - decoration: bold; ' \
            id = 'hoverover'  onmouseover='mouseOver();' onmouseout='mouseOut();')> <b>x</b></button > ";
        }

        function deletes() {
            document.getElementById("fx").value = "";
        }

        function entre() {

        }

        function unsrch() {
            document.getElementById("search").innerHTML = "";
        }

        function mouseOver() {
            document.getElementById("hoverover").style.backgroundColor = "#555555ff";
        }

        function mouseOut() {
            document.getElementById("hoverover").style.backgroundColor = "#e3e3e3ff";
        }

    </script>
</body>

</html>




函数executeCommand（）{
document.getElementById（“搜索”）.innerHTML=”\
取消输入x”；
}
函数deletes（）{
document.getElementById（“fx”）.value=“”；
}
函数entre（）{
}
函数unrch（）{
document.getElementById（“搜索”）.innerHTML=“”；
}
函数mouseOver（）{
document.getElementById（“悬停”）.style.backgroundColor=“#555555 ff”；
}
函数mouseOut（）{
document.getElementById（“悬停”）.style.backgroundColor=“#e3ff”；
}



以下是所做的更改：

我在innerHTML
中添加了换行符，以使其更具可读性

我添加了onmouseover='mouseOver（）；'onmouseout='mouseOut（）哪个调用脚本

3.我删除了两行document.getElementById（“hoverover”）.onmouseover=function（）{mouseOver（）}和
document.getElementById（“hoverover”）.onmouseout=function（）{mouseOut（）}
，因为它们是在编写内部html时添加到按钮的

希望能解决你所有的问题
 尝试用Javascript附加处理程序，而不是用HTML内联（这是一种不好的做法，很难管理）。检查控制台中的错误消息，它们应该会让事情变得清楚。我投了否决票，因为你显然没有亲自调试它。我确实试过。我曾经试过，但是没有成功，所以我试过用JavaScript。当那也不起作用时，我就放弃了。谢谢。现在我可以单击搜索图标，但仍然无法执行onmouseover命令。