在 html 代码中加载一个 javascript 函数答案

【问题标题】：Load a javascript function in html code在 html 代码中加载一个 javascript 函数
【发布时间】：2017-01-30 06:20:07
【问题描述】：

我想使用javascript方法innerHTML读取几个div的值并将它们保存在变量中。那是javascript代码：

function llegirdata()
{
    var spandies = document.getElementById('dies').innerHTML;
    var spanhores = document.getElementById('hores').innerHTML;
    var spanminuts = document.getElementById('minuts').innerHTML;
    var spansegons = document.getElementById('segons').innerHTML;
    console.log(spanhores);
 }

此代码位于名为 temps.js 的脚本中。 html代码为：

<head>

<script type="text/javascript" src="js/temps.js"></script>

</head>
<body>
<div class="contenidor">

 <div id="clockdiv">
    <div>
        <span id="dies">1</span>
        <div class="smalltext">Dies</div>
    </div>
    <div>
        <span id="hores">1</span>
        <div class="smalltext">Hores</div>
    </div>
    <div>
        <span id="minuts">40</span>
        <div class="smalltext">Minuts</div>
    </div>
    <div>
        <span class="segons">00</span>
        <div class="smalltext">Segons</div>
    </div>

    <script language="javascript">
      llegirdata();     
    </script>
</body>

当我在浏览器中运行代码时，spanhores 变量的值不会显示在控制台中。有错误

无法读取 null 的属性“innerHTML”

我知道这个错误意味着脚本在 html 代码之前加载，innerHTML 方法无法读取 span id=hores 的值。而这个是我不明白的，因为我是在加载html代码之后加载脚本的。

我不想在 html 文件中键入 javascript，因为我需要执行更多函数来计算一些值。

如何显示 spanhores 变量的值？

谢谢。

【问题讨论】：

为什么投反对票？好问题，提供代码，尝试解决..？

标签： javascript html typeerror

【解决方案1】：

<span class="segons">00</span>

你打错字了。类不是 Id。

document.getElementById('segons') 返回 null 是因为您根本没有具有该 id 的元素，而不是因为您试图过早阅读它。

【讨论】：

【解决方案2】：

它可以在 ClassName 中找到，但如果你使用类名你不能忘记所有类更改同名

    var all = $(".TestClass").map(function() {
        return this.innerHTML + " - js Test"; 
    }).get();

    $("p").html(all.join());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <div class="TestClass">Test One</div>
    <div class="TestClass">Test Two</div>
    <div class="TestC">Test Two</div>


    <p></p>

【讨论】：

【解决方案3】：

您的主要错误在于将脚本放在 html 代码之前。

未捕获的类型错误：无法读取 null 的属性“innerHTML”

函数运行并尝试获取 html 中包含的那些值，但此时尚未定义。像这样轻松解决：

<body>
<div class="contenidor">

 <div id="clockdiv">
    <div>
        <span id="dies">1</span>
        <div class="smalltext">Dies</div>
    </div>
    <div>
        <span id="hores">1</span>
        <div class="smalltext">Hores</div>
    </div>
    <div>
        <span id="minuts">40</span>
        <div class="smalltext">Minuts</div>
    </div>
    <div>
        <span id="segons">00</span>
        <div class="smalltext">Segons</div>
    </div>

     <script type="text/javascript" src="js/temps.js"></script>

</body>     
</html>

功能适用于所有情况。

【讨论】：

感谢您的回答。我用你的答案 adr1Script 修复了这个错误。