Wie kann ich verhindern, dass meine Taste automatisch gedrückt wird?

-1

Ich habe einer Schaltfläche auf meiner Seite eine Onclick-Funktion zugewiesen. Wenn ich jedoch die Seite öffne, wird sie automatisch gedrückt, und die Zahlen werden durcheinander gebracht.Wie kann ich verhindern, dass meine Taste automatisch gedrückt wird?

Edit: In der Zwischenzeit wurde das Titelproblem behoben. Das Problem liegt jetzt bei Bildern.

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>

Quelle

2017-06-30 Lottom

dies überprüfen kann nicht, enthält auch den Code Fehler, schließen nicht –

Klammern Funktion ich alles geschlossen die Summe davon. Ich kann die ganze Sache schicken, wenn das die Dinge einfacher macht? – Lottom

Einige Fragen: 1) Wie kommt es, dass Ihre erste if-Anweisung nicht geschlossen ist? 2) Wo sonst in Ihrem Code sehen Sie Roll()? 3) Keine Frage, aber bitte machen Sie eine kleinere Version Ihres Codes, die den Großteil der Funktionalität Ihres Programms eliminiert. Es sollte nur den Knopf und die Funktion enthalten und sollte ausreichen, um das Problem zu demonstrieren. Dann geben Sie uns Ihren gesamten Code. Wenn die kleinere Version das Problem nicht zeigt, versuchen Sie, ein Bit auf einmal hinzuzufügen, bis Sie den Abschnitt Ihres Codes herausfinden, der das Problem verursacht. – kojow7

Der Code, den Sie in dem Einfügen hat einige Typfehler. Es gibt zwei fehlende Klammern, von denen eine für die gesamte Roll Funktion gilt. Nach der Korrektur des Codes verhält es sich normal, daher wird die Roll Funktion erst nach einem Klick auf den Button aktiviert.

Ich würde empfehlen, keine regulären Funktionen mit Großbuchstaben zu benennen. Nur Konstruktorfunktionen in der objektorientierten Programmierung sollten mit dem Anfangsbuchstaben groß geschrieben werden. Alle anderen Funktionen sollten mit Kleinbuchstaben beginnen, z. roll oder rollDice. Nicht Roll oder RollDice.

Hier ist der korrigierte Code, der für mich arbeitet wie erwartet:

<!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>

Quelle

2017-06-30 22:08:03

Okay, ich habe versucht, was Sie empfohlen, und es ist jetzt in der Tat behoben, danke. Es funktioniert jedoch immer noch nicht ganz wie beabsichtigt, da sich die Würfelbilder nicht ändern und es daher nicht möglich ist, zu gewinnen. – Lottom

Bitte senden Sie den ganzen Code und HTML-Markup für Würfelrollen und ich werde sehen, was ich tun kann. –

In Ordnung, da. Außerdem habe ich "Neustart" in "Neustart" umbenannt. – Lottom

Wie kann ich verhindern, dass meine Taste automatisch gedrückt wird?

Antwort

Verwandte Themen