Home HTML Data Types DOM JavaScript JS Debugging

ccc

  • Copy your HTML code from the HTML ccc. 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

<html>
<head>
</head>
<body>
<div>
    <p><b>This is how you make text in a paragraph form</b></p>
    <button onclick="switchlinks()">Switch</button>
</div>
<br>
<div>
    <a id="aTag2" href="https://nighthawkcoders.github.io/teacher/basics/html"><i>Where I learned this</i></a>
    <br>
    <a id="aTag1" href="https://www.w3schools.com/"><i>One of the most helpful coding websites</i></a>
    <p>The results should be shown above</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>

%%html

This is how you make text in a paragraph form


Where I learned this
One of the most helpful coding websites

The results should be shown above

%%html

<script src="https://utteranc.es/client.js"
        repo="ninaadkiran/Ninaad-Repository2"
        issue-term="pathname"
        theme="github-dark-orange"
        crossorigin="anonymous"
        async>
</script>