无法更改 InnerText 0r InnerHTML

Question

你好，我在下面有这段代码，我想更改这两个跨度的内部文本，但我做不到。它在控制台和屏幕中都没有变化。声明我的变量有问题，因为当我在声明元素本身后添加 .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>

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;
        
    }
}

Answer 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

Cant Change The InnerText 0r InnerHTML

javascript

function

dom

let

innertext