无法更改 InnerText 0r InnerHTML
Posted
技术标签:
【中文标题】无法更改 InnerText 0r InnerHTML【英文标题】：Cant Change The InnerText 0r InnerHTML 【发布时间】：2021-10-26 06:40:45 【问题描述】：您好，我在下面有这段代码，我想更改这两个跨度的内部文本，但我做不到。在控制台和屏幕上都不会改变。声明我的变量是否存在问题，因为在声明元素本身之后添加 .innerText 时，我可以做我想做的事。
<!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">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form action="" id="userForm">
<input type="number" name="score" id="score">
<input type="text" name="name" id="name">
<button type="submit">Send</button>
</form>
<div class="result-section">
<span id="score-span">Age:</span>
<span id="name-span">Name:</span>
</div>
</body>
</html>
<script src="script.js"></script>
JS
let submit = document.querySelector("#submit")
let userForm = document.querySelector("#userForm")
userForm.addEventListener("submit", focus)
function focus(event)
event.preventDefault()
let value = document.querySelector("#score").value
let key = document.querySelector("#name").value
localStorage.setItem(key, value)
transfer(key, value)
function transfer(key, value)
let score = document.querySelector("#score-span").innerText
score = `$score $value`
let name = document.querySelector("#name-span").innerText
name = `$name $key`
console.log(name)
CSS
#userForm
margin: 50px 100px;
.result-section
width: 75%;
margin: 0 auto;
span
display: block;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid;
【问题讨论】：
name = `$name $key` 只会改变局部变量。你需要[...].innerText = name
感谢您的回答。所以我必须再次更改它添加一行代码。这意味着我正在做的方式并不是真正正确的方式。我错了吗？
【参考方案1】：
您应该引用元素本身而不是变量中的属性 (innerText)：
按如下方式更新transfer函数：
function transfer(key, value)
let score = document.querySelector("#score-span")
score.innerText += ` $value`
let name = document.querySelector("#name-span")
name.innerText += ` $key`
console.log(name)
演示：
let submit = document.querySelector("#submit")
let userForm = document.querySelector("#userForm")
userForm.addEventListener("submit", focus)
function focus(event)
event.preventDefault()
let value = document.querySelector("#score").value
let key = document.querySelector("#name").value
//localStorage.setItem(key, value) // commented to test the code
transfer(key, value)
function transfer(key, value)
let score = document.querySelector("#score-span")
score.innerText += ` $value`
let name = document.querySelector("#name-span")
name.innerText += ` $key`
console.log(name)
#userForm
margin: 50px 100px;
.result-section
width: 75%;
margin: 0 auto;
span
display: block;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid;
<form action="" id="userForm">
<input type="number" name="score" id="score">
<input type="text" name="name" id="name">
<button type="submit">Send</button>
</form>
<div class="result-section">
<span id="score-span">Age:</span>
<span id="name-span">Name:</span>
</div>【讨论】：
以上是关于无法更改 InnerText 0r InnerHTML的主要内容，如果未能解决你的问题，请参考以下文章
Pythons HTMLParser 可以编辑/更改 HTML 元素 innerText 还是只读取它
TypeError：无法将属性'innertext'设置为null