'Showing Cannot Set the Properties Of Null setting (innerHtml). at replaceText

I am trying to create a function that combines story title|date|authorname etc. Using the created function, I was trying to display on the DOM but it kept showing me, cannot set the properties of null setting on the console.Please help.

'use strict'
// declaring fields 
let storyTitle = document.querySelector('.storyTitle');
let date = document.querySelector('.date')
let authorName = document.querySelector('.authorName');
let message = document.querySelector('.message');
let submitBtn = document.querySelector('.submitBtn');

// fields to replace text 
let displayBox = document.querySelector('.displayBox');
let headerField = document.querySelector('.headerText');
let authorField = document.querySelector('.authorField1');
let timeField = document.querySelector('.updatedTime');

// array to store new story objects 
let stories = [];

//replace value with text 
function replaceText() {
    headerField.innerHTML = storyTitle.value;
    authorField.innerHTML = authorName.value;
}

submitBtn.addEventListener('click', () => {
    replaceText();
})

//why is it only replace the header, while leaving the <p> phrase ? what am I missing?

<!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="newStoryStyle.css">
</head>

<body>

    <nav>
        <a href="">Home</a>
        <a class='navLink firstItm' href="topStoriesPage/topStories.html">Top Stories</a>
        <a class='navLink' href="">Myanmar Politics</a>
        <a class='navLink' href="">Myanmar's Economy</a>
        <a class='navLink' href="">Report News To Us</a>
    </nav>
    
    <section class="landing">
        <div class="createNewStoryDiv">
            <input type="text" class='storyTitle' placeholder='Title'>
            <input type="datetime-local" class='date' placeholder='Date & Time'>
            <input type="text" class='authorName' placeholder='Author'>
            <input type="text" class='message' placeholder='Message'>
            <button class="submitBtn">Submit</button>
        </div>

        <section class="displayBox">
            <h3 class="headerField"></h3>
            <p class="authorField1"></p>
            <em>Updated <p class='updatedTime'></p> ago.</em>
        </section>
    </section>
    <script src="newStory.js"></script>
</body>
</html>

Showing Cannot Set the Properties Of Null setting (innerHtml). at replaceText

javascript dom

Solution 1:^[1]

That's because you don't have headerText class.

Changing the selector to .headerField should work

let headerField = document.querySelector('.headerField');

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Cuong Vu

'Showing Cannot Set the Properties Of Null setting (innerHtml). at replaceText

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]