无法更改 InnerText 0r InnerHTML答案

【问题标题】：Cant Change The InnerText 0r InnerHTML无法更改 InnerText 0r InnerHTML
【发布时间】：2021-10-26 06:40:45
【问题描述】：

您好，我在下面有这段代码，我想更改这两个跨度的内部文本，但我做不到。在控制台和屏幕上都不会改变。声明我的变量是否存在问题，因为在声明元素本身之后添加 .innerText 时，我可以做我想做的事。

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">
    <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>

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
感谢您的回答。所以我必须再次更改它添加一行代码。这意味着我正在做的方式并不是真正正确的方式。我错了吗？

标签： javascript function dom let innertext

【解决方案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>

【讨论】：