问JavaScript innerText
EN

Stack Overflow用户

提问于 2022-07-17 22:38:51

回答 1查看 50关注 0票数 0

我是JS的新手。我正在尝试运行这一行代码，它将在每次点击时用嵌入的文本保存一个数字计数。但是在运行的时候我有个错误。

Uncaught :无法读取空属性(读取'innerText')

这是我的密码

JavaScript

 let saveEl = document.getElementById("save-el")
 let countEl = document.getElementById("count-el")
 let count =0

 function increment(){
     count+=1 
     countEl.innerText=count
 }                        

 function save(){
     let countStr= count + " - "
     saveEl.innerText+=countStr 
     countEl.innerText=0
     count=0
 }

HTML

<html>
<head>
<link rel="stylesheet" href="index.css">
</head>

<body>
     <h1><strong>People Entered:</strong></h1>
    <h2 id="count-el">0</h2>
<script src="index.js"></script>
<div class="container-btn">
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<button id="save-btn" onclick="save()">SAVE</button>
<p id="save-el">Previous entries: </p>
</div>  
</body>


</html>

innertext

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-17 22:55:23

尝试将<script>标记移动到<body>的末尾，或者只在DOM加载时运行它：

let count = 0
var saveEl;
var countEl;

function increment() {
  count += 1
  countEl.innerText = count
}

function save() {
  let countStr = count + " - "
  saveEl.innerText += countStr
  countEl.innerText = 0
  count = 0
}

document.addEventListener('DOMContentLoaded', e => {
  saveEl = document.getElementById("save-el")
  countEl = document.getElementById("count-el")
})

<h1><strong>People Entered:</strong></h1>
<h2 id="count-el">0</h2>
<div class="container-btn">
  <button id="increment-btn" onclick="increment()">INCREMENT</button>
  <button id="save-btn" onclick="save()">SAVE</button>
  <p id="save-el">Previous entries: </p>
</div>

如果您的JavaScript位于HTML元素之前，那么当JavaScript加载时，它们将不存在于页面中，因此document.getElementById将返回null。但是，如果您等到这些元素存在时才设置这些变量(因为它们列在<script>标记之前，或者因为DOM内容已经加载)，那么它们就会被找到。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73015826

复制

相似问题

问JavaScript innerText
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript innerTextEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript innerText
EN