Display list items on web page using ajax and DOM

Question

0.00/5 (No votes)

See more:

Hi all, I am new to coding, so for this problem, I am using AJAX to load contents to my web page, I selected the right element and appended as required but they don't appear on the page. What could be wrong.

html

<!DOCTYPE html>
<html>

<head>
    <title>erick_odero-portfolio</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edgev">
    <link rel="stylesheet" href="index.css">
    <script src="https://kit.fontawesome.com/631b2dc748.js" crossorigin="anonymous"></script>
</head>

<body>
    <section class="list">
        <header id="header">
            <h1 id="my-name">Erick O Odero</h1>
            <img src="https://avatars.githubusercontent.com/u/84427589?v=4" alt="Author's profile picture" width="60"
                height="60">
            <nav class="main-menu">
                <ul>
                    <li><a href="../intro-to-programming-asteroid/index.html">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#connect">Connect</a></li>
                </ul>
            </nav>

        </header>
    </section>

    <main>
        <section id="about">
            <h1>About</h1>
            <p> I am healthcare worker in the field of clinical research residing in Memphis Tennessee and now an
                aspiring<br>
                Software Developer. I am currently a student with Code The Dream taking Javascript, HTML, AJAX and <br>
                Fetch
                API
                lessons. When I learnt of the immense potential that technology has to improve health outcomes<br> of
                our
                communities, my interest in coding was conjured and I hope to immerse myself full time in the industry.
            </p>
        </section>

        <section class="list">
            <h1>Experience</h1>
            <ul id="exp">
                <li>clinical Research Associate - United States</li>
                <li>HIV program coordinator - Kenya</li>
                <li>Health program coordinator - Kenya</li>
                <li>Health Worker Training and Capacity building(volunteer) - Vanuatu</li>
            </ul>
        </section>

        <section id="projects">
            <h1>Projects</h1>
            <ul>

            </ul>

        </section>

        <section class="list">
            <h1>My tools</h1>
            <ul class="tools">
                <li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
                <li><a
                        href="https://www.apple.com/macbook-air/?afid=p238%7CsS5GAoNB9-dc_mtid_1870765e38482_pcrid_569734191494_pgrid_110391415659_&cid=aos-us-kwgo-mac--slid---product-">Mac
                        Bookair</a></li>
                <li><a href="https://www.microsoft.com/en-us/software-download/windows10ISO">Windows 10</a></li>
                <li><a href="https://slack.com/intl/en-in/get-started#/createnew">Slack</a></li>
                <li><a href="https://www.freecodecamp.org/learn/">Freecodecamp</a></li>
                <li><a href="https://whimsical.com/lesson-3-1-wireframe-exercise-NbAuTttSYsijaHafZ44mvS">Whimsical</a>
                </li>
                <li><a href="https://github.com">github</a></li>
            </ul>
        </section>
<section class="section">
            <h1>My resume</h1>
            <nav>
                <ul>
                    <li><a href="#">resume</a></li>
                </ul>
            </nav>
        </section>

        <section id="skills">
            <h2 class="list">Skills</h2>
            <ul id="skillz"></ul>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <ul>

            </ul>
        </section>

    </main>

    <!--Create leave message section and add form-->
    <section class="section">
        <h2>Leave a Message</h2>
        <form name="leave_message">

            <fieldset id="details">
                <legend>1 Your details</legend>
                <label for="name">Name:</label><br>
                <input type="text" name="name" required="true"><br>

                <label for="email">Email:</label><br>
                <input type="email" name="email" required="true"><br>
            </fieldset>

            <fieldset id="text_message">
                <legend>2 Your Message</legend>
                <label for="message">Message:</label><br>
                <textarea id="textMessage" name="message" required="true"></textarea><br>
            </fieldset>

            <button id="submit" class="btn" type="submit">Submit</button>

        </form>
    </section>

    <!-- Add message list section-->
    <section id="messages">
        <h2>Messages</h2>
        <ul>

        </ul>
    </section>

    <footer></footer>
    <script src="index.js"></script>
</body>

</html>

javascript

const today = new Date();
const thisYear = today.getFullYear()
const footer = document.querySelector('footer');
const copyright = document.createElement('p');
copyright.innerHTML = `<span> © Erick Odero ${thisYear}</span> `;
footer.appendChild(copyright);

let skills = ['html', 'CSS', 'JavaScript'];
const skillsSection = document.getElementById('skills');
const skillsList = document.getElementById('skills').children[1];

for (let i = 0; i < skills.length; i++) {
    const skill = document.createElement('li');
    skill.textContent = skills[i];
    skillsList.appendChild(skill);
}

// Create and handle edit button
const editMessage = document.querySelector('#text_message');
const editButton = document.createElement('button');
editButton.innerText = 'Edit';
editButton.type = 'button';
editButton.classList.add('btn');
editMessage.appendChild(editButton);

editMessage.addEventListener('click', (e) => {
    const button = e.target;
    const span = document.createElement('span');
    const editedMessage = document.createElement('input');
    input.type = 'text';
    console.log(newMessage);
})

// Handle message form submit  button
const messageForm = document.querySelector('form[name="leave_message"]')

messageForm.addEventListener('submit', (e) => {
    // prevent default refreshing behavior
    e.preventDefault();

    // create variables for each form field
    // const user_name = messageForm.name.value;
    // const user_email = messageForm.email.value;
    // const user_message = messageForm.message.value;

    const user_name = e.target.name;
    const user_email = e.target.email;
    const user_message = e.target.message;

    // Display messages in list
    const messageSection = document.getElementById('messages');
    const messageList = messageSection.children[1];
    const newMessage = document.createElement('li');
    newMessage.innerHTML = `<a href="mailto:${user_email.value}">${user_name.value}</a><span> wrote: ${user_message.value}</span>`;


    // create button element
    const removeButton = document.createElement('button');
    removeButton.innerText = 'remove';
    removeButton.type = 'button';


    // handle the removeButton
    removeButton.addEventListener('click', (e) => {
        const entry = e.target.parentNode;
        entry.remove();
    })
    // reset the form
    messageForm.reset();
    newMessage.appendChild(removeButton);
    messageList.appendChild(newMessage);

})
const header = document.getElementById('header');
header.classList.add('sticky');

var gitHubRequest = new XMLHttpRequest();
gitHubRequest.onreadystatechange = function () {
    if (gitHubRequest.readyState === 4 && gitHubRequest.status ===200) {
        gitHubRequest.responseText;
    }
};
gitHubRequest.open('GET', 'https://api.github.com/users/eodero/repos');
gitHubRequest.send();

gitHubRequest.addEventListener('load', (event) => {
    let repositories = JSON.parse(gitHubRequest.response);
    console.log(repositories);
});

    const projectSection = document.getElementById('projects');
    const projectList = projectSection.lastElementChild;

    for (let i = 0; i < projectList.length; i++) {
        const project = document.createElement('li');
        project.innerText += project[i];
        projectList.appendChild(project);
        console.log(projectSection);
    }

What I have tried:

selecting

by child nodes but all in vain

Posted 6-May-22 18:15pm

erick odero

Updated 7-May-22 7:12am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 15627495 · Answer 1 · 2022-05-07T07:12:00

Hello erick odero !

the "constant" keyword prohibites an update of a var ( forbiden re-allocation ).

try with the common "var" as declaration statement.
"var" make the data mutable and so global ( in Js, for all JS scope and calls ).

the "over use" of "constant" blocks you.

vars in JS :
--old features , but good !
var data; -> global / mutable in all scope
data; -> local for scope / mutable

--modern JS :
let data; -> local for scope, inherited from 'lambda expression' (e)=> , but works every where
const data; -> local for scope ( or global if in main scope ) , but "static/fixed" allocation. unmutable, risky.

about the console for trace :
console.log(myData); for simple var.
console.table(myCompositeElement); for array or complex var. try it ;)

some ";" to end instructions are missing.
look at debug section in your web browser to catch syntax leaks or inoperants instructions.
you can plant "console.log(.......);" for lot of var, to be sure your script runs the way you want. ( tracing ).