Why Doesn't this Work? Javascript getElementById onclick update..

Desired behavior :

About button pressed : display text and change onclick to clear() (button text also changed)

Clear (same button) pressed : go back to being ready for About to be pressed (onclick changed back to about() )

Using :

<input id="aboutButton" type="button" onclick='doAbout()' value="About">

and

function doAbout() {

  document.getElementById("divabout").innerHTML = "by Ananth Chellappa<br>One Hour Design<br>Your questions answered within the hour";

  document.getElementById("divabout").className="aboutcolor";

  document.getElementById("aboutButton").onclick="clearAbout()";

  document.getElementById("aboutButton").value="Clear";

}

function clearAbout() {

  document.getElementById("divabout").innerHTML = "";

  document.getElementById("divabout").className="aboutcolor";

  document.getElementById("aboutButton").onclick='doAbout()';

  document.getElementById("aboutButton").value="About";

}


And : About works the first time and after that, nothing works.

Root cause : it's in HTML that you need 'doAbout()'. In JS, the function is already known, so you just use the name, as in : .onclick=doAbout;

And you're done. Thanks to Parth Desai of G H Raisoni College of Engineering and Management.

Comments

Post a Comment

Popular posts from this blog

How Should You Put Your Text in a Box?

Image
Per the great bloggers, it helps your cause to put your message in a box But, how? I mean, easily? :) Do it once (use these steps, which I got from chatGPT) and, once you have a blog that you can look at in edit mode, you can always cut and paste. Go into Edit HTML mode. If necessary, use a tool like freeformatter.com to make the HTML that your blogging platform creates for you readable (with indentation, etc). Now, locate the text you want to enclose in a box and surround it with : <div style="border: 2px solid COLOR_OF_CHOICE; padding: 10px;"><p><span style="font-family: FONT_OF_CHOICE;"> and </span></p> </div> NOTE : With very little text, you may benefit from adding : display: inline-block; max-width: max-content; //within the style setting For chatGPT: (click to select) When I say 'FORMAT,COLOR,WIDTH,PAD:', followed by some text, please generate HTML tags that ...
Read more

Tricks : Getting Image URL When Page Doesn't Want You To!

This one for example. Why? A good reason I guess... Thankfully , what one can invent, another can discover as Dr. Doyle puts it.. Open Chrome Developer Tools (Right-click > Inspect) Expose the Application menu (might need the right pointing chevron >> ) This gives you a new left panel that has menus like Manifest, Storage, Cache, etc. Scroll down and use the expansion arrow under Frames Then expand Images If, after this you don't k how to grab the URL, hey, McD is hiring 😊
Read more

A Web Interface to Try Dual Key Caesar Cipher Encryption and Decryption

https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Give it a try. If it looks less pretty than it could, it's because I don't know how to hack Blogger well enough 😊 If you Google "decode caesar cipher", you get to : https://www.dcode.fr/caesar-cipher https://www.boxentriq.com/code-breaking/caesar-cipher https://www.thewordfinder.com/caesar-cipher-solver/ All of which are okay for a single key - for encoding. One of them probably does true solving in the sense of finding the best candidate after brute force searching. But none does true code-breaking by looking at character frequency (unless they do😊). But what about two keys?!! There wasn't anything online (for decrypting that is. The dcode site does do encryption, but is really hard to use) Until now :) Give it a try :  https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Kudos to Tamer Abd Alrazaq for porting the java to javascript and getting it to work in the blink of ...
Read more