在HTML中按下按钮时禁用和启用文本

当按下开始按钮时，我应该如何禁用我的文本单击开始游戏开始？按下开始按钮后，它一直显示。

HTML代码：

<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
</body>
</html>

我想这就是您想要的。请检查。。。

<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
<script>
jQuery('#StartBtn').click(function(){
jQuery('.Status').hide();
})  
</script>
</body>
</html>

您可以为Begin Game按钮的onclick事件添加一行。

HTML

<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="beginGame()">Begin Game</button>
<br><br><br>
<div class="Status" id="ClickToBeginMessage">Click Begin Game to start</div>
</div>

JS-

function beginGame(){
gameStarted=true;
$("#ClickToBeginMessage").hide()
}

相关内容

最新更新

热门标签：