2017-05-29 3 views
0

Zunächst, ich bin sicher, es gibt eine offensichtliche Antwort auf diese Frage, aber ich werde immer noch fragen. Also habe ich dieses Projekt, wo der Benutzer würfelt und schreibt, wofür die Würfel sind und was gemacht wird. Es funktioniert durch HTML-Formulare und das Javascript druckt die Ergebnisse, ohne die Seite zu aktualisieren. Ich habe alles funktioniert. Mein aktuelles Problem ist, dass ich möchte, dass das Ergebnis des Codes in die nächste Zeile wechselt, und fahre fort, wenn Sie erneut auf "Senden" klicken.Javascript in die nächste Zeile gehen

$("#modTool").submit(function(event) { 
    event.preventDefault(); 
    console.log($(this).serialize()); 

    var a = document.getElementById("modTool").elements.namedItem("user").value; 
    var b = document.getElementById("modTool").elements.namedItem("actionTaken").value; 
    var c = document.getElementById("modTool").elements.namedItem("target").value; 
    var amount = document.getElementById("modTool").elements.namedItem("amountOfDice").value; 
    var sides = document.getElementById("modTool").elements.namedItem("typeOfDice").value; 
    var d = document.getElementById("modTool").elements.namedItem("bonus").value; 

    var diceRoll = rollDice(amount, sides); 

    var display=document.getElementById("Prompt"); 
    display.innerHTML = "&gt; " + a + " uses " + b + " towards " + c + "<br />" + "&gt; " + diceRoll + " Bonus " + d; 
}); 

https://i.gyazo.com/fe3ffa835ed1acf41c08c7f6fe46ea93.png

Es muss sowohl in der nächsten Zeile gehen, wenn ich ‚Senden‘ klicken Sie erneut auf, sowie eine Scrollbar mit. Irgendwelche Ideen?

+0

Ich bin mir nicht sicher, ob Sie die Frage verstehen. Sehen Sie das zur weiteren Klärung. https://jsfiddle.net/wckggf5g/ Wenn Sie erneut auf "Senden" klicken, wird keine weitere Rolle darunter hinzugefügt. – Drake

+0

Verwenden Sie '+ =' anstelle von '=' für innerHTML zu verketten – kecalace

+0

Das hat es geschafft! Danke @kecalace! – Drake

Antwort

0

Verwenden Sie diese Zeile:

display.innerHTML += "&gt; " + a + " uses " + b + " towards " + c + "<br />" + "&gt; " + diceRoll + " Bonus " + d + "<br /><br />"; 

Statt:

display.innerHTML = "&gt; " + a + " uses " + b + " towards " + c + "<br />" + "&gt; " + diceRoll + " Bonus " + d; 
display.scrollTop = display.scrollHeight; 

hinzufügen Überlauf zu Ihrem #Prompt wie folgt aus:

#Prompt { 
    border-style: groove; 
    height: 400px; 
    max-width:98%; 
    width:auto; 
    position:relative; 
    overflow-y: auto; 
} 

Siehe Arbeitsbeispiel:

function rollDie(sides) { 
 
\t if(!sides) sides = 6; 
 
\t with(Math) return 1 + floor(random() * sides); 
 
} 
 

 
function rollDice(number, sides) { 
 
\t var total = 0; 
 
\t while(number-- > 0) total += rollDie(sides); 
 
\t return total; 
 
} 
 

 
$("#modTool").submit(function(event) { 
 
\t event.preventDefault(); 
 
\t console.log($(this).serialize()); 
 

 
\t var a = document.getElementById("modTool").elements.namedItem("user").value; 
 
\t var b = document.getElementById("modTool").elements.namedItem("actionTaken").value; 
 
\t var c = document.getElementById("modTool").elements.namedItem("target").value; 
 
\t var amount = document.getElementById("modTool").elements.namedItem("amountOfDice").value; 
 
\t var sides = document.getElementById("modTool").elements.namedItem("typeOfDice").value; 
 
\t var d = document.getElementById("modTool").elements.namedItem("bonus").value; 
 

 
\t var diceRoll = rollDice(amount, sides); 
 

 
\t var display=document.getElementById("Prompt"); 
 
\t display.innerHTML += "&gt; " + a + " uses " + b + " towards " + c + "<br />" + "&gt; " + diceRoll + " Bonus " + d + "<br /><br />"; 
 
    
 
\t display.scrollTop = display.scrollHeight; 
 
});
* { 
 
\t font-family: Helvetica, Arial, sans-serif; 
 
\t } 
 
#wrapper { 
 
\t max-width:98%; 
 
\t width:auto; 
 
\t margin:auto; 
 
\t background-color: #fff; 
 
} 
 
#Prompt { 
 
\t border-style: groove; 
 
\t height: 400px; 
 
\t max-width:98%; 
 
\t width:auto; 
 
\t position:relative; 
 
     overflow-y: auto; 
 
} 
 
#Buttons { 
 
\t display: inline-block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<body> 
 
\t <div id="wrapper"> 
 
<div id="Prompt"> 
 
\t <br /> 
 
<!-- \t <p id="diceRoll"> 
 
\t </p> 
 
--> 
 

 
</div> 
 
<br /> 
 
<div ="Buttons"> 
 
\t <form id="modTool" method="POST" action=""> 
 
\t <table> 
 
\t \t <tr> 
 
\t \t <td> 
 
\t \t \t <td><b>USER</b> </td> 
 
\t \t \t <td><select name="user" id="User"> 
 
\t \t \t <option id="PC10">0</option> 
 
\t \t \t <option id="PC11">1</option> 
 
\t \t \t <option id="PC12">2</option> 
 
\t \t \t <option id="PC13">3</option> 
 
\t \t \t <option id="PC14">4</option> 
 
\t \t \t <option id="PC15">5</option> 
 
\t \t \t <option id="PC16">6</option> 
 
\t \t \t <option id="PC17">7</option> 
 
\t \t \t <option id="PC18">8</option> 
 
\t \t \t <option id="PC19">9</option> 
 
\t \t \t <option id="PC110">10</option> 
 
\t \t \t </select></td> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <td><b>ACTION TAKEN</b> </td> 
 
\t \t \t <td><input type="text" name="actionTaken"></input> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <td><b>TARGET</b> </td> 
 
\t \t \t <td><select name="target" id="target"> 
 
\t \t \t <option id="PC20">0</option> 
 
\t \t \t <option id="PC21">1</option> 
 
\t \t \t <option id="PC22">2</option> 
 
\t \t \t <option id="PC23">3</option> 
 
\t \t \t <option id="PC24">4</option> 
 
\t \t \t <option id="PC25">5</option> 
 
\t \t \t <option id="PC26">6</option> 
 
\t \t \t <option id="PC27">7</option> 
 
\t \t \t <option id="PC28">8</option> 
 
\t \t \t <option id="PC29">9</option> 
 
\t \t \t <option id="PC210">10</option> 
 
\t \t \t </select></td> 
 
\t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t <td> 
 
\t \t \t <td><b>DICE SIDES</b> </td> 
 
\t \t \t <td><select name="typeOfDice" id="typeOfDice"> 
 
\t \t \t <option id="D20">20</option> 
 
\t \t \t <option id="D100">100</option> 
 
\t \t \t </select></td> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <td><b>AMOUNT OF DICE</b> 
 
\t \t \t <td><select name="amountOfDice" id="amountOfDice"> 
 
\t \t \t <option id="1Dice">1</option> 
 
\t \t \t <option id="2Dice">2</option> 
 
\t \t \t <option id="3Dice">3</option> 
 
\t \t \t <option id="4Dice">4</option> 
 
\t \t \t <option id="5Dice">5</option> 
 
\t \t \t <option id="6Dice">6</option> 
 
\t \t \t <option id="7Dice">7</option> 
 
\t \t \t <option id="8Dice">8</option> 
 
\t \t \t <option id="9Dice">9</option> 
 
\t \t \t <option id="10Dice">10</option> 
 
\t \t \t </select></td> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <td><b>BONUS</b> </td> 
 
\t \t \t <td><select name="bonus" id="bonus"> 
 
\t \t \t <option id="plus0">0</option> 
 
\t \t \t <option id="plus1">+1</option> 
 
\t \t \t <option id="plus2">+2</option> 
 
\t \t \t <option id="plus3">+3</option> 
 
\t \t \t <option id="plus4">+4</option> 
 
\t \t \t <option id="plus5">+5</option> 
 
\t \t \t <option id="plus6">+6</option> 
 
\t \t \t <option id="plus7">+7</option> 
 
\t \t \t <option id="plus8">+8</option> 
 
\t \t \t <option id="plus9">+9</option> 
 
\t \t \t <option id="plus10">+10</option> 
 
\t \t \t <option id="Minus1">-1</option> 
 
\t \t \t <option id="Minus2">-2</option> 
 
\t \t \t <option id="Minus3">-3</option> 
 
\t \t \t <option id="Minus4">-4</option> 
 
\t \t \t <option id="Minus5">-5</option> 
 
\t \t \t <option id="Minus6">-6</option> 
 
\t \t \t <option id="Minus7">-7</option> 
 
\t \t \t <option id="Minus8">-8</option> 
 
\t \t \t <option id="Minus9">-9</option> 
 
\t \t \t <option id="Minus10">-10</option> 
 
\t \t \t </select></td> 
 
\t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t <td> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <input type="submit" name="submitRound" id="submit"></input> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
\t </form> 
 
</div> 
 
\t </div> 
 
\t </body> 
 
</html>

EDIT: Added Überlauf und machte es Autoscroll bis unten.

+0

Danke @sjaakvbrabant! Das hat es geschafft! Schätze die Hilfe! – Drake

+0

Kein Problem, wenn Sie Fragen haben, lassen Sie es mich wissen! – SjaakvBrabant

Verwandte Themen