Javascript在列中打印文本

Javascript printing text in column

本文关键字:打印 文本 Javascript      更新时间:2023-09-26

主要问题是我希望我的新文本出现在div的下一行,但不在同一位置,也不替换以前的文本。

目前我已经有了打印出玩家和电脑脾气得分结果的代码。

    < style >
    All needed code
    < /style >
<script>
function example() {
if(player == 1) {
document.getElementById("logtxt").innerHTML = "Player rolled "+tempscore+" points"
} else if(player == 2) {
document.getElementById("logtxt").innerHTML = "Computer rolled "+tempscore+" points" }
</script>
<html>
<div class="log">
<h1>Game log<h1>
<p id="logtxt"> </p>
</div>
</html

显然还有更多的代码,但这是需要的部分。

您需要附加日志字符串,而不仅仅是设置内容,您可以为此使用+=

function example() {
    if(player == 1) {
        document.getElementById("logtxt").innerHTML += "Player rolled "+tempscore+" points<br />";
    } else if(player == 2) {
        document.getElementById("logtxt").innerHTML += "Computer rolled "+tempscore+" points<br />";
    }
}

把它变成一个可重复使用的功能更好:

function log(text) {
    //log the text and start a new line
    document.getElementById("logtxt").innerHTML += text + '<br />';
}
function example() {
    if(player == 1) {
        log("Player rolled "+tempscore+" points");
    } else if(player == 2) {
        log("Computer rolled "+tempscore+" points");
    }
}

另一个使用insertAdjacentHTML的地方。。

document.getElementById("logtxt").insertAdjacentHTML('beforeend', "<br/>Player rolled "+tempscore+" points");

示例说明:

在#logtxt元素结束之前(在所有当前内容之后),您可以插入br标记以在每个条目上换行。

您应该使用.appendChild(),这样您就不必使用+=来获取和设置.innerHTML,这也是一个选项。

var doc = docmument;
function E(e){
  return doc.getElementById(e;)
}
function T(t){
  return doc.createTextNode(t);
}
function C(e){
  return doc.createElement(e);
}
function example(){
  var logtxt = E('logtxt');
  if(player === 1) {
    logtxt.appendChild(T('Player rolled '+tempscore+' points'));
    logtxt.appendChild(C('br'));
  else if(player === 2){
    logtxt.appendChild(T('Computer rolled '+tempscore+' points'));
    logtxt.appendChild(C('br'));
  }
}