Hacks

Copy your HTML code from the HTML hacks. Write a Javascript snippet to switch the links of the two a tags when a button is pressed. Once they are switched, change the inner HTML of the top p tag to the word “switched!”

%%html

<html>
<head>
</head>
<body>
<div>
    <p style="color:Tomato;" id="pTag1">This is how you make text in a paragraph form</p>
    <button style="color:Chartreuse;" onclick="switchlinks()">Switch</button>
</div>
<br>
<div>
    <a style="color:DodgerBlue;" id="aTag1" href="https://brandonso36.github.io/brandonso/">Link to my Github Blog</a>
    <br>
    <a style="color:DodgerBlue;" id="aTag2" href="https://nighthawkcoders.github.io/teacher/basics/html">Where I learned this</a>
    <p style="color:Tomato;">This is the end of this html stuff</p>
</div>

<script>
  function switchlinks() {
    var aTag1 = document.getElementById("aTag1");
    var aTag2 = document.getElementById("aTag2");
    var pTag1 = document.getElementById("pTag1");

    // Swap the href attributes
    var tempHref = aTag1.href;
    aTag1.href = aTag2.href;
    aTag2.href = tempHref;

    // Swap the text content
    var aTag1Text = aTag1.innerHTML;
    aTag1.innerHTML = aTag2.innerHTML;
    aTag2.innerHTML = aTag1Text;

    // Update the paragraph text
    pTag1.innerHTML = "Switched!";
  }
</script>
</body>
</html>

This is how you make text in a paragraph form

Link to my Github Blog
Where I learned this

This is the end of this html stuff

Using Javascript with HTML DOM • 3 min read

Description

Hacks