Click here to Skip to main content
15,353,676 members
Please Sign up or sign in to vote.
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
Updated 7-May-22 7:12am

1 solution

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 ).
   

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900