显示javascript变量而不清除屏幕

Displaying javascript variable without clearing screen

本文关键字：清除 屏幕 javascript 变量 显示      更新时间：2023-09-26

我正在学习如何开发，我想工作在一个简单的"点击"游戏使用HTML5, CSS3和JavaScript。我希望练习创造类似于Cookie Clicker的东西。我已经创建了三个图标，它们每个都有一个用途。我想弄清楚如何在屏幕的一部分上显示修改过的变量，而不清除屏幕或不得不求助于窗口弹出。

这里是项目的链接，如果有人有兴趣帮助:

https://github.com/HandleThatError/Practice

这个函数是master.js文件中的displayPoints函数。我目前有以下文件:

function displayPoints() {
    confirm(numClicks);
}

这是我想要的。它显示正确的点击次数。如果我点击中间的按钮20次，然后点击"显示点数"按钮，它就会显示正确的点数。然而，它是在一个弹出窗口中完成的。如何在不使用弹出窗口的情况下显示浏览器内的点数?

我尝试了以下代码:

function displayPoints() {
    document.write(numClicks);
}

这段代码在浏览器内工作，但它清除了屏幕上的图标，所以不可能通过点击第二个按钮来继续生成点。

tl;dr -如何在浏览器屏幕上实时更新变量，而不使用弹出窗口，也不清除屏幕?

您可以在页面上使用html元素并填充如下数据:

<span id="numClicksResult"></span>
<script>document.getElementById('numClicksResult').innerHtml=10;</script>

这是一个链接HTML和JS的重要概念:

你需要一个元素来存储你要更新的内容。这通常是一个div。

<div id="myDiv"></div>

然后，在你的JS中，你需要一种访问div的方法。

document.getElementById("myDiv");

这给了你元素，但是你需要更新元素的值

document.getElementById("myDiv").innerHTML;

你可以访问这个值，但是你需要在点击时更新它。当用户点击时，你对变量做了所有需要做的工作，然后…

document.getElementById("myDiv").innerHTML = myVar;
相关文章：