Javascript文字游戏如何使函数不替换元素

Javascript word game how to make function not replace element

本文关键字：替换 元素 函数 何使 文字游戏 Javascript      更新时间：2023-09-26

问题已解答

我想做一个小的文字游戏，我已经遇到了一个我无法解决的小问题。

HTML: 

<!DOCTYPE HTML>
<html>
<head>
<title>Word Game</title>
<!-- CSS -->
<link rel="stylesheet" type="StyleSheet" href="style.css" />
<!-- Scripts -->
<script src="script.js"></script>
</head>
<body>
    <h1>Word Game</h1>
    <div id="board">
        <p>Do you want to play? (yes/no)</p>
    </div>
    <div id="form">
        <form>
            <fieldset>
                <input type="input" id="userTxt"></input>
                <button type="button" id="btn" onclick = "post()">Send</button>
            </fieldset>
        </form>
    </div>
</body>
</html>
CSS: 

*{
    margin-left: auto;
    margin-right: auto;
}
h1 {
    text-align: center;
}
#board {
    width: 75%;
    height: 100%;
    min-height: 300px;
    border: 1px solid black;
}
#board p {
    padding-left: 3%;
}
#form {
    width: 75%;
    margin-top: 3%;
}
input {
margin: auto;
display: block;
}
button {
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
}
JavaScript: 

var post = function() {
    var userTxt = document.getElementById("userTxt");
    var boardId = document.getElementById("board");
    var text = userTxt.value;
    boardId.innerHTML = "<p>- " + text + "</p>";
}

现在，函数正常工作了。但是,如果你检查代码，你会看到，例如，如果你在方框中写"p"并提交它，然后例如"e"，"p"将更改为"e"，而不是添加新的<p></p>到板上。如何使它添加新元素，而不是替换旧元素?

尝试连接innertext:-

   var post = function() {
        var userTxt = document.getElementById("userTxt");
        var boardId = document.getElementById("board");
        var text = userTxt.value;
        boardId.innerText = boardId.innerText.trim();
        boardId.innerText += " - " + text;
    }

编辑html，直接添加id到您的<p>标签，方便访问。

<div id="board">
    <p id="text-container">Do you want to play? (yes/no)</p>
</div>

并将函数更改为

 function post() {
    var userTxt = document.getElementById("userTxt");
    var boardId = document.getElementById("text-container");
    var text = userTxt.value;
    if (boardId.textContent == "Do you want to play? (yes/no)") {
        boardId.textContent = "- " + text;
    } else {
        boardId.textContent += text;
    }
}

在这个小提琴上试试

相关文章：