Question

首先，我确定有一些明显的答案，但我还是会问。所以我有这个项目，用户掷骰子，写骰子是什么和做什么。它通过html表单工作，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

当我点击“提交”时，它需要转到下一行。再次，以及滚动条。有什么想法吗？

Answer 1

使用此行：

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

而不是：

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

向您的#Prompt添加溢出，如下所示：

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

参见工作示例：

function rollDie(sides) {
	if(!sides) sides = 6;
	with(Math) return 1 + floor(random() * sides);
}

function rollDice(number, sides) {
	var total = 0;
	while(number-- > 0) total += rollDie(sides);
	return total;
}

$( "#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 + "<br /><br />";
  
	display.scrollTop = display.scrollHeight;
});

* {
	font-family: Helvetica, Arial, sans-serif;
	}
#wrapper {
	max-width:98%;
	width:auto;
	margin:auto;
	background-color: #fff;
}
#Prompt {
	border-style: groove;
	height: 400px;
	max-width:98%;
	width:auto;
	position:relative;
        overflow-y: auto;
}
#Buttons {
	display: inline-block;
}

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

修改添加溢出并使其自动滚动到底部。

Javascript转到下一行

1 个答案: