Всякий раз, когда я пытаюсь что-то изменить в этом коде, я меняю только кнопку и функциональные части, но либо ничего не отображается, либо кнопка не работает, когда я нажимаю кнопку, она должна показывать мотивационные комментарии, для веб-сайта я m делаю, вот код:
function myFunction() {
button.onclick = myFunction;
document.getElementById("mot").style.visibility = "visible";
}
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>
<body id = "mot" style = "visibility:hidden;">
<p>It's harder too read code, then it is too write code</p>
<p>Practice makes better, not perfect</p>
<p>Good things take time, the better, the longer</p>
Элемент body должен содержать всю разметку, а не только ее часть. Кроме того, ваш body
не был закрыт.
Я использовал div
, чтобы сохранить ваши комментарии
button.onclick = myFunction;
не будет работать, так как button
не определено. Вы также пытаетесь добавить обработчик событий в уже существующий обработчик событий.
function myFunction()
{
document.getElementById("mot").style.visibility = "visible";
}
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>
<div id = "mot" style = "visibility:hidden;">
<p>It's harder to read code than it is to write code</p>
<p>Practice makes better, not perfect</p>
<p>Good things take time, the better, the longer</p>
</div>
В jquery вы можете сделать это таким образом.
$(document).ready(function(){
$(".motivation").click(function(){
$("#mot").toggle();
});
});
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<button class = "motivation" style = "visibility:visible;">Motivation</button>
<div id = "mot" style = "display:none">
<p>It's harder too read code, then it is too write code</p>
<p>Practice makes better, not perfect</p>
<p>Good things take time, the better, the longer</p>
</div>
Ваша разметка HTML не соответствует стандарту. Любое содержимое должно быть деформировано внутри тега body. Однако вашему коду не нужно button.onclick = myFunction;
функция уже вызывается с атрибутом события кнопки onclick
.
Разметка неправильный может работать следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
<script>
function myFunction() {
//button.onclick = myFunction;
document.getElementById("mot").style.visibility = "visible";
}
</script>
</head>
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>
<body id = "mot" style = "visibility:hidden;">
<p>It's harder too read code, then it is too write code</p>
<p>Practice makes better, not perfect</p>
<p>Good things take time, the better, the longer</p>
</body>
</html>
Чтобы исправить разметку, как предложил Ли выше, поместите мотивационные комментарии внутри блока div.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
<script>
function myFunction() {
//button.onclick = myFunction;
document.getElementById("mot").style.visibility = "visible";
}
</script>
</head>
<body>
<button onclick = "myFunction()" style = "visibility:visible;">Motivation</button>
<div id = "mot" style = "visibility:hidden;">
<p>It's harder too read code, then it is too write code</p>
<p>Practice makes better, not perfect</p>
<p>Good things take time, the better, the longer</p>
</div>
</body>
</html>