Javascript JS&；HTML-将JS脚本放在HTML上

我对JS很陌生

我想让我的html页面保持不变，当JS文本将出现在一个确切的地方，而不是从空白页面开始

我通过HTML上的按钮触发JS函数，HTML中的函数：

function match () {
    setTimeout(function () {
        player_hp -= monster_dmg
        monster_hp -= player_dmg
        if (player_hp<=0) {
            document.write("\nPlayer dies!")
            menu();
            return;
        }
        if (monster_hp<=0) {
            document.write("\nPlayer wins!")
            menu();
            return;
        }
        if (fight=1) {
            document.write("\nPlayer hp:" + player_hp)
            document.write("\nMonster hp:" + monster_hp)
            document.write("\n");
            match()
        }
    }, interval)
}

函数匹配（）{
setTimeout（函数（）{
玩家\u hp-=怪物\u dmg
怪物\u hp-=玩家\u dmg
如果（玩家_hp您应该创建一个results
div
，其中将显示匹配结果。

只需在HTML代码中添加

并替换所有您的
文档。write（）
for

document.getElementById（'match_results'）。innerHTML+=“
玩家获胜！”


此命令将ID为
match\u results
的内容追加到元素中

您应该使用

而不是
\n
，因为这是在HTML代码中断行的正确方法。
一种简单的处理方法是创建一个具有如下ID属性的
或
元素：


现在您可以使用Javascript方法访问该元素

document.querySelector（“#status”）
然后使用该元素的innerHTML函数更改内部内容。您甚至可以将
document.querySelector
函数放入一个方便的函数中，我将其命名为
send_status（）

事情是这样的


/*默认值*/
var player_hp=300；
var monster_dmg=30；
var monster_hp=200；
var区间=500；
var-player_-dmg=50；
匹配（）；
/*这里有一个函数将替换您的文档。write（）函数*/
功能发送状态（消息）{
document.querySelector（“#status”）.innerHTML=消息；
}
函数匹配（）{
setTimeout（函数（）{
玩家\u hp-=怪物\u dmg
怪物\u hp-=玩家\u dmg
如果（player_hp简短回答：你必须操作DOM，而不仅仅是写入文档。更详细的回答：这是所有SPA的基本概念，有很多SPA框架可以让你基于此构建复杂的应用程序。但至少你应该检查JQuery，它是操作DOM的一个非常方便的工具。因此，首先开始学习DOM是什么，以及如何触摸它：在显示的内容中没有html。您只是在编写纯文本。如果您想要一些布局，您应该考虑如何使用它（主要是css）然后用你的JS来填充你的文本。正如ZorgoZ所说，DOM操作是必要的。但是为了你的需要，写你自己的JS而不是学习一个框架。我无法表达我的感激之情！这个解决方案比我想象的要伟大。谢谢！PS：那个怪物dmg太多了，哈哈：你真的想改变al吗有很多原因（不要使用monster_dmg，而是创建一个具有“伤害”属性和一个名为“攻击”的功能的“怪物对象”，然后可以用来告诉你的“玩家”对象“失去生命并在必要时死亡”而不是有很多全局变量。谷歌“javascript对象”获取更多信息