HTML Updating Second Column When Clicking list

Question

I'm new to HTML and javascript, but basically, I'm stuck on trying to get the "Change This" text to change when I click "First Year". It sort of works however it'll reload the page really quickly and say at the top left corner "hi there." enter image description here

Here is my HTML Code:

<head>
    <meta charset="UTF-8">
    <title>Classes</title>
</head>
<body>
    <h1>
        Course List
    </h1>
    <nav>
        <ul>
            <li><a href = "http://localhost:63342/Resume/Resume.html?_ijt=gpaieus6bdg9b18347umv1b08p"> Home </a></li>
            <li><a href = "http://localhost:63342/Resume/Classes.html?_ijt=bv5pcf5ooj4ruaat99jlvgrjm5"> Classes </a></li>
            <li><a href = """> Projects </a></li>
            <li><a href = ""> About </a></li>
            <li><a href = ""> Contact </a></li>
        </ul>
    </nav>
    <div class = "column1">
        <p> Classes</p>
        <ul>
            <li onclick = "getText(this.id)" id = "text1"><a href = "">First Year</a></li>
            <li><a href = "">Second Year</a></li>
            <li><a href = "">Third Year</a></li>
            <li><a href = "">Fourth Year</a></li>
        </ul>
    </div>
    <div class = "column2">
        <p>
            Change this
        </p>
        <script
            type = "text/javascript" src = "click.js">
        </script>
        <script
                type = "text/javascript" src = "ParagraphChanger.js" >
        </script>
    </div>

</body>
</html>

CSS code:

<style>
    nav ul
    {
        margin: 30;
        padding: 0;
        display: flex;
        justify-content: space-around;
        list-style-type: none;
    }
    nav li{
        display: inline:
        margin-right: 40px;
    }
    h1
    {
        text-align: center;
    }
    .column1
    {
    width: 300px;
    height: 825px;
    float: left;
    margin: 10px;
    border: 2px solid #000000;
    }
    .column2
    {
        width: 1100px;
        height: 825px;
        float: left;
        margin: 10px;
        border: 2px solid #000000;
    }
</style>

JavaScript Code (paragraph changer):

function getText(str)
{
    document.write('<p2>' + "hi there" + '</p2>');
}

Something like this question should help. https://stackoverflow.com/questions/2554149/html-javascript-change-div-content Essentially, at the moment, your "document.write" is just adding more content to your HTML document. If you want to change the content of an existing element, then you need to reference that element, and its relevant property — Craig, Apr 30 '21 at 01:50

score 1 · Answer 1 · answered Apr 30 '21 at 01:50

What you want to do is add a container element to each block of text you want to change. That way you have a reference for your javascript. Here is an example:

document.getElementById("button").onclick = function() {
  document.getElementById("change-text").textContent = "New text loaded";
};

<table cellpadding="20">
  <tr>
    <td>
      <button id="button">Change 1</button>
    </td>
    <td>
      <div id="change-text">Example text</div>
    </td>
  </tr>
</table>

HTML Updating Second Column When Clicking list

1 Answers1