Question

我正在学习如何发展，我想在一个简单的＆＃34; clicker＆＃34;使用HTML5，CSS3和JavaScript的游戏。我正在寻求练习创建类似于Cookie Clicker的东西。我创建了三个图标，每个图标都有用。我想弄清楚如何在屏幕的一部分上显示修改后的变量而不清除屏幕或不得不求助于窗口弹出窗口。

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

https://github.com/HandleThatError/Practice

有问题的函数是master.js文件中的displayPoints函数。我目前有以下内容：

function displayPoints() {
    confirm(numClicks);
}

这就是我想要的。它显示正确的点击次数。如果我点击中间按钮二十次，然后点击＆＃34;显示点＆＃34;按钮，它会显示正确的点数。但是，它在弹出窗口中执行。如何在不使用弹出窗口的情况下显示浏览器内的点数？

我尝试了以下代码：

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

此代码在浏览器内部工作，但它清除了图标的屏幕，因此无法通过单击第二个按钮来保持生成点。

tl; dr - 如何在浏览器屏幕上实时更新变量，而无需使用弹出窗口而不清除屏幕？任何帮助将不胜感激。

Answer 1

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

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

Answer 2

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

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

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

然后，在您的JS中，您需要一种访问div。

的方法

document.getElementById("myDiv");

这为您提供了元素，但您需要更新元素的值。

document.getElementById("myDiv").innerHTML;

因此，您可以访问该值，但只要有点击就需要更新它。当用户点击时，您可以完成变量所需的所有工作，然后......

document.getElementById("myDiv").innerHTML = myVar;

显示javascript变量而不清除屏幕

2 个答案: