+ 3

Change the paragraph content using onclick=""

I want to change the paragraph back and forth using the onclick="next()" and onclick="prev()". code: https://code.sololearn.com/WQO7JgVL8C4s/#js

javascript dom onclick replace

28th Jun 2020, 11:25 AM

Adarsh Mamgain

2 Answers

+ 2

You need to have a innerText for your click event target. <a></a> has no visible for clicking. Don't use <a> because <a> has default behaviour, use <button> as click event listener. Also, for SoloLearn app, it places scripts in JS tab in <head>, so you will get a null error because your getElement functions cannot get the elements successfully. Change from onclick attributes to addEventListener method. Wrap scripts in window.onload callback.

28th Jun 2020, 11:37 AM

Gordon

+ 1

Here a solution which can be adapted: <body> <button onclick="aSwitch()">Switch between a and b DIVs</button> <br/><br/> <div id="aDiv" style="top:100px; left:10; width: 400px; height: 300px; position: fixed; background-color: darkCyan; color: lime"> This is aDiv element </div> <div id="bDiv" style="top:100px; left:10; width: 300px; height: 300px; position: fixed; background-color: lime; visibility: hidden"> <center>This is bDiv element</center> </div> <script> function aSwitch() { var a = document.getElementById('aDiv'); var b = document.getElementById('bDiv'); if (a.style.visibility === 'hidden') { b.style.visibility = 'hidden'; a.style.visibility = 'visible'; } else { a.style.visibility = 'hidden'; b.style.visibility = 'visible'; } } </script> </body>

28th Jun 2020, 12:04 PM

JaScript