Question

我是编码的新手，如果我做错了，我很抱歉，我知道这是非常基本的。

我正在尝试使用HTML中的JavaScript中定义的变量来获取一个文本字符串。到目前为止我已经完成了这个，但内容区域仍然是空的，我不知道我哪里出错了。我需要在首次请求页面时以及每次单击按钮时在内容div中显示var传记。在此先感谢您的帮助。 HTML代码：

    <!DOCTYPE html>
    <html>

    <head>
    <title> Katie Jeynes </title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body onload="displayBiography();">

    <div id="leftBar"> 
    <button class="button" onclick="displayBiography();"> Biography 
    </button>
    </div>

    <div id="content" > 
    <script src="myJS.js"> </script>
    <script> displayBiography();</script>
    </div>


    </body>
    </html>

JS代码：

    var content = document.getElementByID("content");

    var biography = "<p> Katie Jeynes is currently in her 3rd year of 
    study"+ 
    "undergraduate study etc </p>"
    ;


    function displayBiography() {
        "use strict";
        content.innerHTML = biography;
    }

Answer 1

您可以输入以下内容来设置文字：

document.getElementById("content").innerHTML = biography;

Answer 2

如果您在浏览器上运行代码并使用其控制台，您将看到您有一个sintax错误“未终止的字符串文字”（可以找到有关它的更多信息here ）在定义传记时。

你应该使用这种方法：

<!--- HTML --->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<div id="container">
  <a href="#">
    <div id="postit_1" class="postit_family"><span>Start Card</span></div>
  </a>
  <a href="#">
    <div id="postit_2" class="postit_family"><span>Invoice & Time Card Entry</span></div>
  </a>
  <a href="#">
    <div id="postit_3" class="postit_family"><span>Smart Products</span></div>
  </a>
  <a href="#">
    <div id="postit_4" class="postit_family"><span>Reports</span></div>
  </a>
  <a href="#">
    <div id="postit_5" class="postit_family"><span>Paycodes</span></div>
  </a>
  <a href="#">
    <div id="postit_6" class="postit_family"><span>System Guides</span></div>
  </a>
  <a href="#">
    <div id="postit_7" class="postit_family"><span>Occ Codes</span></div>
  </a>
  <a href="#">
    <div id="postit_8" class="postit_family"><span>Marcs</span></div>
  </a>

</div>

或者这个：

var biography = "<p> Katie Jeynes is currently in her 3rd year of study"+ 
"undergraduate study etc </p>";

如果您想添加一个分隔线，可以在单词study之后使用HTML标记var biography = "<p> Katie Jeynes is currently in her 3rd year of study \ undergraduate study etc </p>";向用户显示。

此外，正如 j08691 所述，getElementById是正确的sintax，而不是getElementByID。

RaphaMex 建议您从内容中删除脚本调用。你应该这样，我想解释你原因。

因为您已经调用了displayBiography（）（通过首次单击或加载页面），content.innerHTML将已经更改了HTML节点内容，并将其中包含您的传记的值。

如何通过HTML在网页中显示javascript变量？

2 个答案: