Search code examples
javascriptdom-events

Javascript getElementbyID with button


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>&nbsp;<button class="art-button" onclick="buttonPARTICULAR()">Aulas Particulares</button></p>
    <p>&nbsp;<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>&nbsp;<button class="art-button" onclick="buttonPARTICULAR()">Aulas Particulares</button></p>
 <p>&nbsp;<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 committing 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 command.


Solution

  • Besides 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 command

    What you want is this:

    function buttonINTENSIVOS()
      {
        document.getElementbyId("desc").innerHTML="Intensivo";
      }
    function buttonIMERSIVOS()
    {
          document.getElementbyId("desc").innerHTML="Imersivos";
    }
    function buttonPALESTRAS()
    {  ... }