Using Javascript with HTML DOM
DOM
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
%%html
<script src="https://utteranc.es/client.js"
repo="ninaadkiran/Ninaad-Repository2"
issue-term="pathname"
theme="github-dark-orange"
crossorigin="anonymous"
async>
</script>