JavaScript Note project only executed once and not running any more due to an error

Code Feedback
1 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viweport" content="width=device-width, initial-scale=1.0">

    <title>Note App</title>

    <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>

    <link href="css/style.css" rel="stylesheet" type="text/css">


  </head>

  <body>

      <button class="add" id ="add"> <i class = "fas fa-plus"></i> Add Note</button>

  </body>
<script src="js/script.js" type="text/javascript"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js" ></script>

</html>

the JS code, this is the original programmer’s code, and its giving errors but the program did execute successfully once now it won’t run

const addBtn = document.getElementById("add");

const notes = JSON.parse(localStorage.getItem("notes"));

if (notes) {
    notes.forEach((note) => {
        addNewNote(note);
    });
}

addBtn.addEventListener("click", () => {
    addNewNote();
});

function addNewNote(text = "") {
    const note = document.createElement("div");
    note.classList.add("note");

    note.innerHTML = `
        <div class="notes">
            <div class="tools">
                <button class="edit"><i class="fas fa-edit"></i></button>
                <button class="delete"><i class="fas fa-trash-alt"></i></button>
            </div>
            <div class="main ${text ? "" : "hidden"}"></div>
            <textarea class="${text ? "hidden" : ""}"></textarea>
        </div>
    `;

    const editBtn = note.querySelector(".edit");
    const deleteBtn = note.querySelector(".delete");

    const main = note.querySelector(".main");
    const textArea = note.querySelector("textarea");

    textArea.value = text;
    main.innerHTML = marked(text);

    editBtn.addEventListener("click", () => {
        main.classList.toggle("hidden");
        textArea.classList.toggle("hidden");
    });

    deleteBtn.addEventListener("click", () => {
        note.remove();

        updateLS();
    });

    textArea.addEventListener("input", (e) => {
        const { value } = e.target;

        main.innerHTML = marked(value);

        updateLS();
    });

    document.body.appendChild(note);
}

function updateLS() {
    const notesText = document.querySelectorAll("textarea");

    const notes = [];

    notesText.forEach((note) => {
        notes.push(note.value);
    });

    localStorage.setItem("notes", JSON.stringify(notes));
}

This is the error

image
image1920Ă—1080 234 KB

2

If you open the console or hover over the problematic line it will probably tell you what is wrong.

3

image
image1920Ă—1080 231 KB

I run the original creators code from gitHub just to see if i would get the this error and yes I am still having this error not sure what it means

“marked is not defined”

4

You haven’t defined a function named marked, so it is undefined.

5

Hi Ariel thanks for the response however I have just gone over the code not sure where it is picking up the error from as I have said before the these are the origial code I am thinking it is the browser that may be actaully picking up a unecessery error, I did mange to run the program before and it worked perfectly however it just wont execute anymore but thank you for sharing your thought.

6

It’s not the browser, it’s your code. Your code says main.innerHTML = marked(text);

It tries to set the innerHTML of the main element to whatever the function marked(text) returns. But there is no function called marked in your code. That’s why the browser is throwing a Reference Error. Any browser would do that. Can you share the gitHub link from where you’ve copied that code?

1 Like
7

Try moving marked.min.js up before your script in the HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js" ></script> 
<script src="js/script.js" type="text/javascript"></script>
1 Like
8

https://github.com/florinpop17/10-projects-10-hours this is the link to the project I was following is Note-App

9

Noooo way that actually fixed the problem, Thank you very much. Not sure why it needed to in that order but it actually fixed the issue :grin:

10

Your code is read from top to bottom. If script.js contains references that are declared in a library, then that library must be imported before script.js.

1 Like
11

Understood, thanks for the explanation.