Change color of text using javascript-CodePudding

I have a task app here allowing where a user can create a task and select the category of each task. I want it such that when the task created is the category "Personal", the color property of the text when displayed is blue. Else if it is "Work", then its red. Below is what i have tried in my javascript file.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
</head>
<body>

    <div >
        <div >
            <div >TO-DO APP</div>
        </div>

        <div >
            <div >CREATE A TO-DO</div>
        </div>

        <form id="todo-form">
            <div >
                <div >
                    <input  name="newTask" type="text" placeholder="eg. Do the laundry"> 
                </div>     
            </div>
    
            <div >
                <div >CATEGORY</div>
            </div>
    
            <div >
                <div >
                    <input type="radio"  name="category" id="option1" value="Work">
                    <label  for="option1">Work</label>
                </div>
                <div >
                    <input type="radio"  name="category" id="option2" value="Personal">
                    <label  for="option2">Personal</label>
                </div>
            </div>
    
            <div >
                <div ><button type="submit"  active>ADD TO-DO</button></div>
            </div>
        </form>

        <div >
            <div >TO-DO LIST</div>
        </div>

        <div >

        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Javascript:

const todoForm = document.getElementById("todo-form")

window.addEventListener("load", () => {
    todos = JSON.parse(localStorage.getItem("todos")) || []

    todoForm.addEventListener("submit", (e) => {
        e.preventDefault()
        if (e.target.elements.newTask.value != "") {
            const todo = {
                task: e.target.elements.newTask.value,
                category: e.target.elements.category.value
            }
    
            todos.push(todo);
    
            localStorage.setItem("todos", JSON.stringify(todos));
    
            e.target.reset()
    
            showList()
        }
    })
    
    showList();
})

function showList() {
    let outPut = '';
    let taskListShow = document.querySelector(".todoList")

    todos.forEach((data, index)=> {

        if (data.category == "Personal") {
            document.getElementById("todoContent").style.color = "blue"
        } else {
            document.getElementById("todoContent").style.color = "red"
        }

        outPut  = `
        <div >
            <div >
                <input id="todoContent"  value="${data.task}" readonly>
            </div>
            <div >
                <div >
                    <div >
                        <button type="button"  onClick="editItem(${index})">Edit</button>
                    </div>
                    <div >
                        <button type="button"  onClick="deleteItem(${index})">Delete</button>
                    </div>       
                </div>
            </div>
        </div>`
    });
    taskListShow.innerHTML = outPut;
}

function deleteItem(index) {
    todos.splice(index, 1)
    localStorage.setItem("todos", JSON.stringify(todos))
    showList()
}

function editItem(index) {
    const taskAllName = document.querySelectorAll(".todoContent");
    const taskName = taskAllName[index];
    taskName.removeAttribute("readonly");
    taskName.focus();
    taskName.addEventListener("blur", (e) => {
        const newValue = e.target.value;
        const newTodos = todos.map((todo, i) =>
          i === index ? { ...todo, task: newValue } : { ...todo }
        );
        taskName.setAttribute("readonly", true);
        localStorage.setItem("todos", JSON.stringify(newTodos));
        todos = newTodos;
        showList();
    });
}

I am currently getting an error:

"Uncaught TypeError: Cannot read properties of null (reading 'style')"

CodePudding user response：

Because you select the element before it was created. Here is my idea:

const curColor = data.category == "Personal" ? "blue" : "red";
<input ...{other properties} style="color: ${curColor} !important" readonly>

But I don't know why the style's priority lower than class, maybe you have some logic, so I use !important here.

CodePudding user response：

You are trying to select element that is not loaded. put <script> code on the end of body, or use defer property like <script src="script.js" defer> to fix.