EDIT: I have fixed the semi-colons, the case sensitivity, as well as the brackets. The code WORKS if I remove the functions after buttonPARTICULAR! Why?
EDIT: Fixed. I'm a dumbass. Sorry!!! :-Z
When I keep it simple, like this, everything works fine:
<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, whenever I add more functions to the script, ALL of the buttons and code stop working.
<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>
How is it that augmenting the quantity of virtually identical code will disrupt even the code that, before, was functional? Am I mitting a syntax error here?
EDIT
@Woot4Moot Still not functional
still not functional.
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 be more specific, when I load this code into my browser (the buttons and p id="desc") but when the buttons are clicked on, the p id="desc" does not change according to the JavaScript mand.
EDIT: I have fixed the semi-colons, the case sensitivity, as well as the brackets. The code WORKS if I remove the functions after buttonPARTICULAR! Why?
EDIT: Fixed. I'm a dumbass. Sorry!!! :-Z
When I keep it simple, like this, everything works fine:
<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, whenever I add more functions to the script, ALL of the buttons and code stop working.
<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>
How is it that augmenting the quantity of virtually identical code will disrupt even the code that, before, was functional? Am I mitting a syntax error here?
EDIT
@Woot4Moot Still not functional
still not functional.
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 be more specific, when I load this code into my browser (the buttons and p id="desc") but when the buttons are clicked on, the p id="desc" does not change according to the JavaScript mand.
-
tags should be updated to reflect the more general
javascripttag – Woot4Moo Commented Jan 14, 2013 at 15:44
3 Answers
Reset to default 1Besides the syntax errors:
function buttonINTENSIVOS()
}
document.getElementbyID("desc").innerHTML="Intensivo"
{
function buttonIMERSIVOS()
}
document.getElementbyID("desc").innerHTML="Imersivos"
{
function buttonPALESTRAS()
}
Your braces are the wrong way. Functions open with { not } and you dont have semicolons ; to terminate each mand
What you want is this:
function buttonINTENSIVOS()
{
document.getElementbyId("desc").innerHTML="Intensivo";
}
function buttonIMERSIVOS()
{
document.getElementbyId("desc").innerHTML="Imersivos";
}
function buttonPALESTRAS()
{ ... }
As well as what has already been pointed out (incorrect opening/closing braces), javascript is case sensitive, so your method name is incorrect:
document.getElementbyID("...")
should be
document.getElementById("....")
(note the lower-case d in Id and the uppercase B in By)
Just to make this neater and easier to debug, I would suggest using the following function to condense the individual functions into one:
function button(letter)
{
document.getElementById("desc").innerHTML=letter;
}
Then in your HTML:
<p><button onclick="button('A')">A</button></p>
<p><button onclick="button('B')">B</button></p>
<p><button onclick="button('C')">C</button></p>
<p id="desc"></p>
Note the single quotes inside each of the brackets. The function will directly print the contents of the brackets to the p id=desc.