如何阻止我的按钮自动按下？

时间：2017-06-30 21:55:39

标签： javascript html

我已经为我页面上的按钮分配了一个onclick功能。然而，当我打开页面时，它已经自动按下了，它会弄乱数字。

编辑：与此同时，标题问题已修复。现在的问题在于图像。

var pt;
var d1;
var d2;
var bet;
var betInt;
var guess;
var money = 100;
var moneyInt;
var rroll;
var ptprogress = [];


 function roll() {
        guess = document.getElementById("pGuess").value;
        bet = document.getElementById("pBet").value;
        betInt = parseInt(bet);
        money = document.getElementById("money").innerHTML;
        moneyInt = parseInt(money);
        ptprogress.push(moneyInt);
   
d1 = dicerange(1, 7) - 1;
d2 = dicerange(1, 7) - 1;
rroll = d1 + d2; 
   
        if (moneyInt < bet) {
          alert("Don't think so, buddy. Earn a few more bucks first.");
          return;
        }
        if(bet <= 0) {
            alert("No bets below zero buddy, name a number!");
            return;
        }
        if (guess == rroll) {

          document.getElementById("money").innerHTML = moneyInt + 2 * betInt;
          document.getElementById("output").innerHTML = "Hmph, you won this one...";
        } 
        else {
          document.getElementById("money").innerHTML = moneyInt - betInt;
          document.getElementById("output").innerHTML = "Tough luck mate";

        }
        if (moneyInt === 0) alert("Congratulations my man, you have absolutely nothing left.");
      }


function dicerange(min, max) {
  return Math.ceil(Math.random() * (max - min)) + min;
}

function getDice() {

  switch (d1) {
    case 1:
      document.getElementById("die1img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/reddie1md.png";
      break;

    case 2:
      document.getElementById("die1img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-2-md.png";
      break;


    case 3:
      document.getElementById("die1img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-3-md.png";
      break;


    case 4:
      document.getElementById("die1img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-4-md.png";
      break;


    case 5:
      document.getElementById("die1img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-5-md.png";
      break;

    case 6:
      document.getElementById("die1img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-6-md.png";
      break;
  }

  switch (d2) {
    case 1:
      document.getElementById("die2img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-1-md.png";
      break;

    case 2:
      document.getElementById("die2img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-2-md.png";
      break;


    case 3:
      document.getElementById("die2img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-3-md.png";
      break;


    case 4:
      document.getElementById("die2img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-4-md.png";
      break;


    case 5:
      document.getElementById("die2img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-5-md.png";
      break;

    case 6:
      document.getElementById("die2img").src = "http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/red-die-6-md.png";
      break;
  }

}

function restart() {
  document.getElementById("money").innerHTML = "100";
  document.getElementById("output").innerHTML = "";
  document.getElementById("pBet").value = "";

  document.getElementById("die1img").src = "";
  document.getElementById("die2img").src = "";
}
html {
  background-image: url(http://orig00.deviantart.net/a35e/f/2014/137/1/c/casino_card_background_wallpaper_hd_1920x1080_by_giozaga-d7intx0.jpg);
  background-size: cover;
}

.diceposition {
  border-color: #FFFFFF;
  width: 90%;
  background-color: rgba(255, 255, 255, 0);
  color: white;
  margin-top: 2%;
  margin-left: 5%;
}

.emptydie {
  width: 512;
  height: 512;
}

.die1 {
  border: solid;
  border-style: inset;
  width: 512px;
  height: 512px;
  background-color: white;
  float: left;
  margin-left: 7.5%;
  margin-top: 100px;
}

.die2 {
  border: solid;
  border-style: inset;
  width: 512px;
  height: 512px;
  background-color: white;
  float: right;
  margin-right: 7.5%;
  margin-top: 100px;
}

.button1 {
  margin: auto;
  display: block;
  border: 2px solid #8b0002;
  color: #ffffff;
  border-radius: 10px 10px 30px 30px;
  font-family: Verdana;
  width: auto;
  height: auto;
  font-size: 20px;
  padding: 15px 25px;
  background-color: #fd4140;
}

.button2 {
  margin: auto;
  display: block;
  border: 2px solid #8b0002;
  color: #ffffff;
  border-radius: 10px 10px 40px 40px;
  font-family: Verdana;
  width: auto;
  height: auto;
  font-size: 16px;
  padding: 6px 20px;
  background-color: #fd4140;
}

.holder {
  text-align: center;
}

.dropdown {
  margin: 0px;
  margin-top: 12px;
  height: 48px;
  width: 12%;
  border-width: 3px;
  border-style: solid;
  border-color: #8b0002;
  padding: 12px;
  font-family: Verdana;
  font-size: 16px;
  color: #666666;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background: url('https://www.spreadshirt.com/image-server/v1/designs/12491917,width=178,height=178/poker-suit-diamond.png') no-repeat 97% 50% #ffffff;
  background-size: 25px 25px;
  text-align: center;
}

.input {
  width: 12%;
  height: 48px;
  padding: 12px;
  font-family: Verdana;
  font-size: 16px;
  border-width: 3px;
  border-style: solid;
  border-color: #8b0002;
}
<html>

<head>
	<link rel="stylesheet" type="text/css" href="http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/CSS%20Eindopdracht">

</head>

<body>
	<div class="die1">
		<img id="die1img" src="">
	</div>
	<div class="die2">
		<img id="die2img" src="">
	</div>
	<center>
		<p id="money" style="margin-left: 0px; border-style: solid; border-radius: 25px 25px 25px 25px; width: 100px; height: 40px; padding-top: 15px; background-color: #fd4140; border-color: #8b0002; color: #ffffff; text-weight: bold; font-size: 25px;">100</p>
	</center>
	<br>
	<div style="margin: auto;">

		<div class="holder">
			<input class="input" type="text" id="pBet">
		</div>
		<br>


		<div class="holder">
			<select class="dropdown" id="pGuess">
			
			<option value="1">Pick a bet</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
		</select>
		</div>

		<br>
		<button type="submit" class="button1" onclick="roll()">Roll those dice!</button>


		<div class="holder">
			<button type="submit" class="button2" onclick="restart()">Redraw</button>
		</div>
		<div class="holder">

			<p style="family-font: Verdana; color: white; font-size: 20px" id="output">
			</p>
		</div>
	</div>

	<script src="http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/JS%20Eindopdracht"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

您粘贴的代码存在一些类型错误。有两个缺少的括号，其中一个是整个Roll函数的封闭括号。更正代码后，它的行为正常，因此只有在单击按钮后才会激活Roll功能。

我建议不要用大写字母命名常规函数。只有首字母大写，才能在面向对象编程中使用构造函数。所有其他函数应以小写开头，f.e。 roll或rollDice。不是Roll或RollDice。

以下是按预期为我工作的更正代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Button function</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button type = "submit" class="button1" onclick="roll()">Roll those dice!</button>
    <script>
      function roll() {
        guess = document.getElementById("pGuess").value;
        bet = document.getElementById("pBet").value;
        betInt = parseInt(bet);
        money = document.getElementById("money").innerHTML;
        moneyInt = parseInt(money);
        ptprogress.push(moneyInt);
        if (moneyInt < bet) {
          alert("Don't think so, buddy. Earn a few more bucks first.");
          return;
        }
        if(bet <= 0) {
            alert("No bets below zero buddy, name a number!");
            return;
        }
        if (guess == roll) {

          document.getElementById("money").innerHTML = moneyInt + 2 * betInt;
          document.getElementById("output").innerHTML = "Hmph, you won this one...";
        } 
        else {
          document.getElementById("money").innerHTML = moneyInt - betInt;
          document.getElementById("output").innerHTML = "Tough luck mate";

        }
        if (moneyInt === 0) alert("Congratulations my man, you have absolutely nothing left.");
      }
    </script>
  </body>
</html>

＆＃13;
＆＃13; 
var pt;
var d1;
var d2;
var bet;
var betInt;
var guess;
var money = 100;
var moneyInt;
var rroll;
var ptprogress = [];

 function roll() {
    guess = document.getElementById("pGuess").value;
    bet = document.getElementById("pBet").value;
    betInt = parseInt(bet);
    money = document.getElementById("money").innerHTML;
    moneyInt = parseInt(money);
    ptprogress.push(moneyInt);
    if (moneyInt < bet) {
      alert("Don't think so, buddy. Earn a few more bucks first.");
      return;
    }
    if(bet <= 0) {
        alert("No bets below zero buddy, name a number!");
        return;
    }

      d1 = dicerange(1, 7) - 1;
      d2 = dicerange(1, 7) - 1;
      rroll = d1 + d2; 
      console.log(rroll);
    if (guess == rroll) {

      document.getElementById("money").innerHTML = moneyInt + 2 * betInt;
      document.getElementById("output").innerHTML = "Hmph, you won this one...";
    } 
    else {
      document.getElementById("money").innerHTML = moneyInt - betInt;
      document.getElementById("output").innerHTML = "Tough luck mate";

    }
    if (moneyInt === 0) alert("Congratulations my man, you have absolutely nothing left.");
  }

function dicerange(min, max) {
  return Math.ceil(Math.random() * (max - min)) + min;
}

function getDice() {

  switch (d1) {
    case 1:
      document.getElementById("die1img").src = "http://www.clker.com/cliparts/9/u/S/1/o/A/red-die-1-md.png";
      break;

    case 2:
      document.getElementById("die1img").src = "http://www.clker.com/cliparts/N/e/8/O/Z/G/red-die-2-md.png";
      break;


    case 3:
      document.getElementById("die1img").src = "http://www.clker.com/cliparts/Y/3/S/S/N/8/red-die-3-md.png";
      break;


    case 4:
      document.getElementById("die1img").src = "http://www.clker.com/cliparts/T/1/G/i/B/E/red-die-4-md.png";
      break;


    case 5:
      document.getElementById("die1img").src = "http://www.clker.com/cliparts/p/N/w/Z/Q/C/red-die-5-md.png";
      break;

    case 6:
      document.getElementById("die1img").src = "http://www.clker.com/cliparts/O/r/n/M/N/g/red-die-6-md.png";
      break;
  }

  switch (d2) {
    case 1:
      document.getElementById("die2img").src = "http://www.clker.com/cliparts/9/u/S/1/o/A/red-die-1-md.png";
      break;

    case 2:
      document.getElementById("die2img").src = "http://www.clker.com/cliparts/N/e/8/O/Z/G/red-die-2-md.png";
      break;


    case 3:
      document.getElementById("die2img").src = "http://www.clker.com/cliparts/Y/3/S/S/N/8/red-die-3-md.png";
      break;


    case 4:
      document.getElementById("die2img").src = "http://www.clker.com/cliparts/T/1/G/i/B/E/red-die-4-md.png";
      break;


    case 5:
      document.getElementById("die2img").src = "http://www.clker.com/cliparts/p/N/w/Z/Q/C/red-die-5-md.png";
      break;

    case 6:
      document.getElementById("die2img").src = "http://www.clker.com/cliparts/O/r/n/M/N/g/red-die-6-md.png";
      break;
  }

}

function Restart() {
  document.getElementById("money").innerHTML = "100";
  document.getElementById("output").innerHTML = "";
  document.getElementById("pBet").value = "";

  document.getElementById("die1img").src = "http://vignette4.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg/revision/latest?cb=20140413154605";
  document.getElementById("die2img").src = "http://vignette4.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg/revision/latest?cb=20140413154605";
}
＆＃13; 
html{
background-image: url(http://orig00.deviantart.net/a35e/f/2014/137/1/c/casino_card_background_wallpaper_hd_1920x1080_by_giozaga-d7intx0.jpg);
background-size: cover;
}

.button1 {
 margin: auto;
 display: block;
 border:2px solid #8b0002;
 color: #ffffff;
 border-radius: 10px 10px 30px 30px;
 font-family: Verdana;
 width: auto;
 height: auto;
 font-size: 20px;
 padding: 15px 25px;
 background-color: #fd4140;
}

.button2 {
 margin: auto;
 display: block;
 border:2px solid #8b0002;
 color: #ffffff;
 border-radius: 10px 10px 40px 40px;
 font-family: Verdana;
 width: auto;
 height: auto;
 font-size: 16px;
 padding: 6px 20px;
  background-color: #fd4140;
}

.holder {
  text-align: center;
  
}

.dropdown {
  margin: 0px;
  margin-top: 12px;
  height: 48px;
  width: 12%;
  border-width: 3px;
  border-style: solid;
  border-color: #8b0002;
  padding: 12px;
  font-family: Verdana;
  font-size: 16px;
  color: #666666;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background: url('https://www.spreadshirt.com/image-server/v1/designs/12491917,width=178,height=178/poker-suit-diamond.png') no-repeat 97% 50% #ffffff;
  background-size: 25px 25px;
  text-align: center;
}

.input {
  width: 12%;
  height: 48px;
  padding: 12px;
  font-family: Verdana;
  font-size: 16px;
  border-width: 3px;
  border-style: solid;
  border-color: #8b0002;
}
＆＃13; 
<html>

<head>
	<link rel="stylesheet" type="text/css" href="http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/CSS%20Eindopdracht">
	
</head>

<body>
	<div class="textactual" style="border-color:#FFFFFF;  
                 width: 90%;
               
                 background-color: rgba(255, 255, 255, 0);
                 color: white;
                 margin-top: 2%;
                 margin-left: 5%;
                 ">
		<div style="border: solid; border-style: inset; width: 512px; height: 512px; background-color: white; float: left; margin-left: 7.5%; margin-top: 100px;" id="diceleft">
			<img style="width: 512; height: 512;" id="die1img" src = "http://vignette4.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg/revision/latest?cb=20140413154605">
		</div>
		<div style="border-style: inset; width: 512px; height: 512px; background-color: white; float: right; margin-right: 7.5%; margin-top: 100px;" id="diceright">
			<img style="width: 512; height: 512;" id="die2img" src = "http://vignette4.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg/revision/latest?cb=20140413154605">
		</div>
		<center>
			<p id="money" style="margin-left: 0px; border-style: solid; border-radius: 25px 25px 25px 25px; width: 100px; height: 40px; padding-top: 15px; background-color: #fd4140; border-color: #8b0002; color: #ffffff; text-weight: bold; font-size: 25px;">100</p>
		</center>
		<br>
		<div style="margin: auto;">

			<div class="holder">
				<input class="input" type="text" id="pBet">
			</div>
				<br>
			

			<div class="holder">
				<select class="dropdown" id="pGuess">
			
			<option value="1">Pick a bet</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
		</select>
			</div>

			<br>
			 <button type = "submit" class="button1" onclick="roll()">Roll those dice!</button>
   
			
			<div class="holder">	
		<button type = "submit" class="button2" onclick="Restart()">Redraw</button>
			</div>	
			<div class="holder">
				
			<p id="output">
			</p>
				</div>
		</div>
	</div>
	<script src="http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/JS%20Eindopdracht"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题