ボタンが自動的に押されないようにするにはどうすればよいですか？

-1

私のページのボタンに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> 
 
\t <link rel="stylesheet" type="text/css" href="http://tlangevoort.informatica.bc-enschede.nl/Projects/Eindopdracht/CSS%20Eindopdracht"> 
 

 
</head> 
 

 
<body> 
 
\t <div class="die1"> 
 
\t \t <img id="die1img" src=""> 
 
\t </div> 
 
\t <div class="die2"> 
 
\t \t <img id="die2img" src=""> 
 
\t </div> 
 
\t <center> 
 
\t \t <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> 
 
\t </center> 
 
\t <br> 
 
\t <div style="margin: auto;"> 
 

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

 

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

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

 

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

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

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

 
</html>

出典

2017-06-30 Lottom

はこれを検証カント、また、あなたのコードにエラーが含まれ、機能ブラケットが –

を閉じていない私はですべてを閉じましたそれの合計。それが事をより簡単にするなら、私は全部を送ることができますか？ – Lottom

いくつかの質問：1）最初のif文はどのように閉じられませんか？ 2）あなたのコードのどこにRoll（）がありますか？ 3）ご質問はありませんが、ご使用のプログラムの機能のほとんどを削除して、より小さなバージョンのコードを作成してください。それにはボタンと機能だけが含まれていて、問題を示すのに十分でなければなりません。その後、コード全体を教えてください。小さいバージョンで問題が示されない場合は、問題の原因となっているコードのセクションを見つけるまで少しずつ追加してみてください。 – kojow7

あなたはいくつかのタイプのエラーがあるに貼り付けたコード。欠けている括弧が2つあります。そのうちの1つは、Roll関数全体を囲むものです。コードを修正した後、正常に動作するため、ボタンをクリックした後にのみRoll機能が有効になります。

大文字の正規関数の名前を付けないことをお勧めします。オブジェクト指向プログラミングのコンストラクタ関数は、最初の文字を大文字にして名前を付ける必要があります。その他の関数はすべて小文字で始まる必要があります。 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>

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

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

<html> 
 

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

 
<body> 
 
\t <div class="textactual" style="border-color:#FFFFFF; 
 
       width: 90%; 
 
       
 
       background-color: rgba(255, 255, 255, 0); 
 
       color: white; 
 
       margin-top: 2%; 
 
       margin-left: 5%; 
 
       "> 
 
\t \t <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"> 
 
\t \t \t <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"> 
 
\t \t </div> 
 
\t \t <div style="border-style: inset; width: 512px; height: 512px; background-color: white; float: right; margin-right: 7.5%; margin-top: 100px;" id="diceright"> 
 
\t \t \t <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"> 
 
\t \t </div> 
 
\t \t <center> 
 
\t \t \t <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> 
 
\t \t </center> 
 
\t \t <br> 
 
\t \t <div style="margin: auto;"> 
 

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

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

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

 
</html>

出典

2017-06-30 22:08:03

さて、お勧めしたことを試しましたが、今は確かに修正されました。ありがとうございます。しかし、ダイイメージは変わらないので、それはまだ意図したとおりには動作していないので、勝つことはできません。 – Lottom

ダイスローリングのコードとHTMLマークアップ全体を送ってください。私は何ができるかを見ていきます。 –

さて、そこに。また、「Restart」を「restart」に変更しました。 – Lottom

ボタンが自動的に押されないようにするにはどうすればよいですか？

答えて

関連する問題