帮助点击编码按钮 [英] Help with button on click coding
问题描述
我对编码非常陌生......我希望只有在用户点击按钮后才能显示问题的答案。当答案显示页面加载时，如果您单击显示答案它隐藏答案，然后再次按下以显示答案，但我希望它开始时不显示答案（所以不要放弃）。欢迎大家帮忙。
我尝试过：
按钮。按钮{
显示：阻止;
margin-left：auto;
margin-right：auto;
align：center}
#myDIV {
宽度：100％;
填充：50px 0;
text -align：center;
background-color：＃65a83d;
margin-top：20px;
}
< button class =buttononclick =myFunction（）>显示答案< / button>
< div>
< div id =myDIVclass =hidden>
答案是10.
< / div>
< script>
函数myFunction（）{
var x = document.getElementById（'myDIV'）;
if（x.style.display ==='none'）{
x.style.display ='block';
} else {
x.style.display ='none';
}
}
< / script>
Hi I'm very new to coding... I want the answer to the question to show only after the person clicks on the button. At the moment the answer shows when the page loads, if you click show answer it hides the answer, and press again to show answer, but i want it to start by not showing answer (so not to give it away). All help welcome.
What I have tried:
BUTTON.button {
display: block;
margin-left: auto;
margin-right: auto;
align: centre }
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: #65a83d;
margin-top:20px;
}
<button class="button" onclick="myFunction()">Show Answer </button>
<div>
<div id="myDIV" class="hidden">
The answer is 10.
</div>
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
推荐答案
如果你看看代码正在做什么来展示它，它正在设置一个样式在div上。所以，只需对你的div执行此操作：
If you look at what the code is doing to show it, it is setting a style on the div. So, just do this to your div:
<div id="myDIV" class="hidden" style="display: none;">
这将隐藏起来。
and that will start it off hidden.
首先，你没有用于隐藏的CSS类;所以它什么都不做。要编写最少量的代码来满足您的需求，您需要在主体或窗口onload（）中调用JavaScript MyFunction（）。我决定在体内做这件事。
所有我添加的是< body onload =myFunction（）>到下面的HTML正文标签。
下面是一个测试它的示例网页。
< ;！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.0 Transitional // EN>
< html>
< head>
< title> asdf< / title>
< style type =text / css>
BUTTON.button {
显示：阻止;
margin-left：auto;
margin-right：auto;
align：center}
#myDIV {
宽度：100％;
填充：50px 0;
text-align：center;
背景颜色：＃65a83d;
margin-top：20px;
}
< / style>
< / head>
< body onload =myFunction（）>
< button class =buttononclick = myFunction（）>显示答案< / button>
< div>
< div id =myDIVstyle =hidden>
答案是10.
< / div>
< script>
函数myFunction（）{
var x = document.getElementById（'myDIV'）;
if（x.style.display ==='none' ）{
x.style.display ='block';
} else {
x.style.display ='none'; < br $>
}
}
< / script>
< / body>
< / html>
Firstly, you don't have a CSS class for "hidden"; so it won't do anything. To write the least amount of code to accomplish your needs, you need to call JavaScript MyFunction() either in the body or window onload(). I decided to do it in the body.
All I added was <body onload="myFunction()"> to the HTML body tag below.
Below is a sample web page to test it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>asdf</title>
<style type="text/css">
BUTTON.button {
display: block;
margin-left: auto;
margin-right: auto;
align: centre }
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: #65a83d;
margin-top:20px;
}
</style>
</head>
<body onload="myFunction()">
<button class="button" onclick="myFunction()">Show Answer </button>
<div>
<div id="myDIV" style="hidden">
The answer is 10.
</div>
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
这篇关于帮助点击编码按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
