Question

我的代码中有一个按钮，可以更改文本＆＃39; hello＆＃39;再见＆＃39;再见＆＃39;但它不起作用。我犯了什么错误？我的代码在我的编码程序中正确缩进。

这是我的代码：

<!doctype html>
<html>
<head>
<title>chat</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">     
body {
    margin:0px;
}

#topBar {   
    background-color:#33ccff;
    width:100%;
    height:100px; 
    z-index:1;
    margin:0px;
    padding:0px;
    position:fixed;
}

＆＃39;＃标志＆＃39;是包含我想要更改的文本的div的ID，＆＃39;＃loginbutton＆＃39;是我想要使用的按钮。

#logo { 
    width:15%;
    height:60px;
    float:left;
    background-color:white;
    margin-left:20px;
    margin-top:20px;
}
#login { 
    width:10%;
    height:60px;
    float:right;
    margin-right:20px;
    margin-top:20px;
    border-radius:8px;
}
#loginbutton { --this is the button that I want to change the text with
    background-color: #lightgrey;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 30px;
    cursor: pointer;
    width:100%;
    height:60px;
    border-radius:10px;
    font-family:Impact;
    line-height:60px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
#loginbutton:hover {
    background-color: black; 
    color: white;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.24), 2px 2px 2px 2px rgba(0,0,0,0.19);
}
</style>    
</head>

<body>
<div id="topBar">

这是按钮和包含文字的div：

<div id="login">
<button id="loginbutton">LOG IN</button> <!--This is the button-->
</div>
<div id="logo">hello</div> <!--This is the text I am trying to change-->
</div>

以下是我使用的JavaScript代码：

<script type="text/javscript">
document.getElementById("loginbutton").onclick=function { 
    document.getElementById("logo").innerHTML="Goodbye";
}
</script>
</body>
</html>

Answer 1

你需要为这种情况下缺少的函数指定（）。

<script type="text/javscript">
document.getElementById("loginbutton").onclick=function() { 
document.getElementById("logo").innerHTML="Goodbye";
}
</script>

Answer 2

我建议使用event listener来添加点击处理程序

<script type="text/javscript">
  document.getElementById("loginbutton").addEventListener('click', function(e) {
    document.getElementById("logo").innerHTML = "Goodbye";
  });
</script>

更新

您现有的代码有一个语法错误，导致它无法正常工作，它在()一词之后缺少括号function，应该看起来像这样

document.getElementById("loginbutton").onclick=function() {

Answer 3

应该是

<script type="text/javscript">
     document.getElementById("loginbutton").onclick = function() { 
     document.getElementById("logo").innerHTML = "Goodbye"; }
  //further code
</script>

Answer 4

拼写text/javscript不正确。更正拼写，然后在功能词后添加()。

请参阅下面更正的代码段：

<script type="text/JavaScript">
 document.getElementById("loginbutton").onclick=function() { 
   document.getElementById("logo").innerHTML="Goodbye";
 }
</script>

为什么这个HTML按钮不起作用？

4 个答案: