在我的 HTML 文件中包含一个来自 .js 文件的变量答案

【问题标题】：Include a variable in my HTML file from a .js file在我的 HTML 文件中包含一个来自 .js 文件的变量
【发布时间】：2021-08-19 22:21:21
【问题描述】：

编辑：感谢大家的帮助。实际上 p5 中有一个内置函数允许在屏幕，现在，它完美地工作了。

我有一个包含sc 变量的sketch.js 文件。

我想在我的 index.html 文件中调用 sc 变量来显示它。

我查看了许多帖子和视频，但它始终只显示变量位于同一 HTML 文件的 <script> 标头中时如何操作。

如果我的变量在其他文件中，我该怎么做？

文件：（我正在使用 p5）

function setup() {
  createCanvas(400, 400);
  //Square variables
  sQx = 5;
  sQy = 5;
  sQs = 20;
  speed = 5;
  //Rectangle variables
  Rx = 300
  Ry = 300
  Rw = 40
  Rh = 70
  //Points variable
  Px = 300
  Py = 300
  Ps = 10
  //Score variable
  sc = 0
}

function draw() {


  background(100);
  color(255, 204, 0)
  square(sQx, sQy, sQs)
  color(255, 204, 0)

  //Makes the Square move
  if (keyIsDown(UP_ARROW)) {
    sQy -= speed
  } else if (keyIsDown(DOWN_ARROW)) {
    sQy += speed
  } else if (keyIsDown(LEFT_ARROW)) {
    sQx -= speed;
  } else if (keyIsDown(RIGHT_ARROW)) {
    sQx += speed;
  }
  //rect(Rx, Ry, Rw, Rh)
  //Create the points

  square(Px, Py, 10)
  // Detect if Square is on the points and change the points place
  let d = dist(sQx, sQy, Px, Py)

  if (d <= 30) {
    let RdX = random(0, 400)
    Px = RdX
    let RdY = random(0, 400)
    Py = RdY
    sc = sc + 1
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Sketch</title>

  <link rel="stylesheet" type="text/css" href="style.css">


  <script src="libraries/p5.min.js"></script>
  <script src="libraries/p5.sound.min.js"></script>
  <script src="sketch.js">
  </script>

</head>

<body>
  <div id="sc"></div>
  <script>
    let value = printSc()
    document.getElementById("sc").innerHTML = "your score is:" + value
  </script>
  <div id="sc"></div>
</body>

</html>

我想在屏幕上显示“sc”值

对不起，如果有些事情可以做不同的事情，我真的是编码新手

【问题讨论】：

HTML 不能调用任何东西，它是一种标记语言。您可以使用 JS 将 sc 值插入 HTML。
感谢您的澄清。但是如何？
您只需要使用沼泽标准<script src 标签导入sketch.js 脚本。如果这不起作用，那么您需要提供所有代码来重现该问题，sc 可以涵盖我们所知道的所有内容
好的，谢谢，我试试
它已经存在但无法正常工作，所以我添加了所有代码

标签： javascript html include

【解决方案1】：

您可以将此代码放在 HTML 文件中的任何位置：

<!DOCTYPE html>
<html>
<body>

<script>
document.write(sc);
</script>

</body>
</html>

【讨论】：

这也不起作用。我可以尝试将我的完整 2 个文件发送给您，以便您查看吗？
请在顶部发布您的代码编辑您的原始帖子。

【解决方案2】：

你能试试这个例子吗？

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="sc"></div>
</body>
<script>
    let value = printSc()
    document.getElementById("sc").innerHTML = value
</script>

</html>

script.js

function printSc() {
// your logic
    let d = 20
    let sc
    if (d <= 30) {

        sc = d + 1
    }
    return sc
}

【讨论】：

d 是我用来测量两个物体之间距离的另一个变量
是的，您可以简单地将变量返回到 index.html 文件。成功了吗？
不，抱歉，您希望我将完整的 2 个文件发给您吗？