+ 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
2 Réponses
+ 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.
+ 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>