UPDATE: I have corrected the semi-colons, case sensitivity, and brackets in the code. It functions properly if I eliminate the functions after buttonPARTICULAR! Why is that?
UPDATE: Issue resolved. My mistake. Apologies!!! :-Z
When I simplify it like this, everything runs smoothly:
<head>
<script>
function buttonGRUPO()
{
document.getElementById("desc").innerHTML="Grupo";
}
function buttonPARTICULAR()
{
document.getElementById("desc").innerHTML="Particular";
}
</script>
</head>
<body>
<p> <button class="art-button" onclick="buttonPARTICULAR()">Aulas Particulares</button></p>
<p> <button class="art-button" onclick="buttonGRUPO()">Aulas em Grupo</button></p>
<p id="desc">Text</p>
</body>
However, adding more functions to the script causes ALL buttons and code to cease functioning.
<head>
<script>
function buttonGRUPO()
{
document.getElementById("desc").innerHTML="Grupo";
}
function buttonPARTICULAR()
{
document.getElementById("desc").innerHTML="Particular";
}
function buttonINCOMPANY()
{
document.getElementbyID("desc").innerHTML="in-COmpany";
}
function buttonINTENSIVOS()
}
document.getElementbyID("desc").innerHTML="Intensivo";
{
function buttonIMERSIVOS()
}
document.getElementbyID("desc").innerHTML="Imersivos"
{
function buttonPALESTRAS()
}
document.getElementbyID("desc").innerHTML="Palestras"
}
</script>
</head>
<body>
<p> <button class="art-button" onclick="buttonPARTICULAR()">Aulas Particulares</button></p>
<p> <button class="art-button" onclick="buttonGRUPO()">Aulas em Grupo</button> </p>
<p id="desc">Text</p>
</body>
Why does increasing the amount of nearly identical code disrupt even the previously functional code? Is there a syntax error here?
UPDATE
@Woot4Moot Still not working
still not working.
function buttonB()
{
document.getElementById("desc").innerHTML="B";
}
function buttonA()
{
document.getElementById("desc").innerHTML="A";
}
function buttonC()
{
document.getElementbyID("desc").innerHTML="C";
}
function buttonD()
{
document.getElementbyID("desc").innerHTML="D";
}
function buttonE()
{
document.getElementbyID("desc").innerHTML="E";
}
function buttonF()
{
document.getElementbyID("desc").innerHTML="F";
}
<p><button onclick="buttonA()">A</button></p>
<p><button onclick="buttonB()">B</button></p>
<p id="desc"> text</p>'
To clarify further, when I view this code in my browser (the buttons and p id="desc") but upon clicking the buttons, the content within p id="desc" does not change as expected based on the JavaScript command.