I apologise profusely for the cursed images but I'm making this to annoy friends.
I want to have two different buttons that will display two different images on my website.
(I am very new to HTML and Javascript so please forgive if its really simple.)
I have copied most of this from tutorials and then gone back and tweaked it to do what I want and have had great success apart from this, the first button works perfectly but the second one doesn't display anything and causes and error message:
TypeError: Cannot read property 'style' of null at ShowTwerkingCrewmateMoreCursed (/script.js:12:11) at HTMLButtonElement.onclick (/:41:64)
function ShowTwerkingCrewmate() {
var x = document.getElementById('TwerkingCrewmateButton');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function ShowTwerkingCrewmateMoreCursed() {
var x = document.getElementById('TwerkingCrewmateMoreCursedButton');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}<body style="color: coral; background-color: lightblue;">
<script src="script.js"></script>
<!--
This is how you write a comment
-->
<header>
<nav>
</nav>
<h1 style="color:coral;">
<center>
The Website Header
</center>
</h1>
</header>
<main>
<article>
<section>
<h3>
Amogus sus
</h3>
<BUTTON ONCLICK="ShowTwerkingCrewmate()">Click me</BUTTON>
<br>
<DIV ID="TwerkingCrewmateButton" STYLE="display:none">
<IMG SRC="TwerkingCrewmate.gif" style="max-height: 25%; max-width: 25%;"></IMG>
</DIV>
<BUTTON ONCLICK="ShowTwerkingCrewmateMoreCursed()">Don't click me</BUTTON>
<br>
<DIV ID="TwerkingCrewmateButtonMoreCursedButton" STYLE="display:none">
<IMG SRC="TwerkingCrewmateMoreCursed.gif" style="max-height: 25%; max-width: 25%;"></IMG>
</DIV>
</section>
</article>
<article>
<section>
<br>
<a href="https://youtu.be/dQw4w9WgXcQ"> Click me </a>
</section>
</article>
<p>
<b>
This is a paragraph of text where there are a bunch of words that are in senctences that have meaning and ideas conveyed through them.
</b>
</p>
</main>
<footer>
</footer>
</body>
Aucun commentaire:
Enregistrer un commentaire