2017-05-29 14 views
0

まず最初に、これに明らかな答えがあると確信していますが、私はまだ尋ねます。 私はこのプロジェクトを、ユーザーがサイコロを振っているところで行い、サイコロが何のために何をしているのかを書いています。 これはhtml形式で動作し、javascriptはページを更新せずに結果を出力します。私はそれをすべて稼いだ。 私の現在の問題は、コードの結果を次の行に移動して、もう一度[送信]をクリックしてもらいたいということです。Javascript次の行に移動

$("#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

それは私が再び「提出する」と同様に、スクロールバーを持つクリックすると、次の行に移動するには両方必要があります。 アイデア

+0

私はあなたがその質問を理解しているかどうかはわかりません。詳細は、これを参照してください。 https://jsfiddle.net/wckggf5g/ もう一度[送信]をクリックすると、下に別のロールは追加されません。 – Drake

+0

innerHTMLに '='の代わりに '+ ='を使用して連結します – kecalace

+0

これはそれでした!ありがとう@kecalace! – Drake

答えて

0

使用このライン:

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

の代わりに:

:作業の例を参照してください

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

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

このようなあなたの#Promptにオーバーフローを追加210

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: 追加オーバーフローし、それが底まで自動スクロールました。

+0

ありがとう@sjaakvbrabant!それはそれをした!助けを感謝します! – Drake

+0

ご質問がある場合は、私に教えてください! – SjaakvBrabant

関連する問題