Почему эта кнопка HTML не работает?

У меня есть кнопка внутри моего кода, которая должна изменить текст «hello» на «Goodbye», но это не сработает. Какую ошибку я сделал? Мой код правильно отстут в моей программе кодирования.Почему эта кнопка HTML не работает?

Вот мой код:

<!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; 
}

«#logo» является идентификатором DIV, который содержит текст, который я хочу изменить и «#loginbutton» кнопки, которую я хочу использовать.

#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>

источник

2016-05-08 Josh Green

Вы видите сообщение об ошибке в консоли JavaScript? Вы даже смотрели там? – Barmar

вам необходимо указать() для функции, которая отсутствует в этом случае.

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

источник

2016-05-08 05:12:17

Это должно быть

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

источник

2016-05-08 05:21:32 Yomesh

Вы должны объяснить, в чем проблема с оригиналом, и что вы изменили, чтобы исправить это. – Barmar

Я рекомендую использовать 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() {

источник

2016-05-08 05:47:30 LGSon

В любом случае это может быть лучший стиль, он не затрагивает настоящую проблему в его коде, что является синтаксической ошибкой в определении функции. – Barmar

@Barmar Итак, правильно, нужно было бы адресовать это, когда выкладывали в первый раз ... обновлялись и будут в моих будущих ответах – LGSon

орфографию text/javscript не является правильным. Исправьте орфографию, а затем добавьте () после функционального слова.

См исправленный фрагмент кода ниже:

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

источник

2016-05-08 06:46:50

Почему эта кнопка HTML не работает?

ответ

Смежные вопросы