CODEWITHSUNDEEP
javascripthtmlonchangegetelementbyidtypeerror
Liborio
Liborio

Reputation: 23

very simple script fails on onChange event. Uncaught TypeError: document.getElementbyId is not a function

I know this might look like an already asked question, and it probably is. But I've checked all of the answers already given and none of them fits my problem.

So here is the thing.

I have a very simple piece of code, like super simple. But I can't get my script to work. I always get the error Uncaught TypeError: document.getElementbyId is not a function.

Obviously the code below is just a practice / testing code, I know it's completely worthless. Still I can't seem to make it work.

Things I've already tried to move the script to the body but nothing changes:

<!DOCTYPE html>
<html>
<head>
<title>SUPPORTO FUNZIONALE BI</title>

<script>

    function selectValues(){

    var ruolo = document.getElementbyId("select_ruolo").innerHTML;
    console.log(ruolo);

}

</script>



</head>

<body>



<h1>SUPPORTO FUNZIONALE BI</h1>

<div id= 'main_nav'> <!-- INIZIO MAIN_NAV  -->
    <ul>
        <li><a href="SF.html">HOME</a></li>
    <!--    <li><a href ="">SERVIZI ATTIVI / DA ATTIVARE</a></li> -->
        <li><a href ="">FAQs</a></li>
        <li><a href="service_management.html">SERVICE MANAGEMENT</a></li>
    </ul>
</div> <!--  FINE MAIN_NAV-->   

<div id= 'content'><!-- INIZIO_CONTENT -->
    <form>
        <fieldset>
            <legend> User information </legend>
                Nome: <input type="text" label="nome utente">
                Cognome: <input type="text" label="cognome"> 
                Ruolo: <select id= "select_ruolo" onchange="selectValues();">
                            <option>-</option>
                            <option>ISF</option>
                            <option>DM</option>
                            <option>RCM</option>
                            <option>RPM</option>
                            <option>Head of Franchise</option>
                        </select>
                Linea/Franchise: <select id ="select_linea">
                            <option> </option>
                                </select>
        </fieldset>
    </form>

 <div> <!-- FINE CONTENT -->

</body>

</html>

Can anyone help me identify where the problem lies ?

Upvotes: 0

Views: 1253

Answers (1)

Mark R
Mark R

Reputation: 337

You just have a typo. The function is

document.getElementById("element")

The B is capitalized. It's working for me with this

<!DOCTYPE html>
<html>
<head>
<title>SUPPORTO FUNZIONALE BI</title>

<script>

    function selectValues(){

    var ruolo = document.getElementById("select_ruolo").innerHTML;
    console.log(ruolo);

}

</script>



</head>

<body>



<h1>SUPPORTO FUNZIONALE BI</h1>

<div id= 'main_nav'> <!-- INIZIO MAIN_NAV  -->
    <ul>
        <li><a href="SF.html">HOME</a></li>
    <!--    <li><a href ="">SERVIZI ATTIVI / DA ATTIVARE</a></li> -->
        <li><a href ="">FAQs</a></li>
        <li><a href="service_management.html">SERVICE MANAGEMENT</a></li>
    </ul>
</div> <!--  FINE MAIN_NAV-->   

<div id= 'content'><!-- INIZIO_CONTENT -->
    <form>
        <fieldset>
            <legend> User information </legend>
                Nome: <input type="text" label="nome utente">
                Cognome: <input type="text" label="cognome"> 
                Ruolo: <select id= "select_ruolo" onchange="selectValues();">
                            <option>-</option>
                            <option>ISF</option>
                            <option>DM</option>
                            <option>RCM</option>
                            <option>RPM</option>
                            <option>Head of Franchise</option>
                        </select>
                Linea/Franchise: <select id ="select_linea">
                            <option> </option>
                                </select>
        </fieldset>
    </form>

 <div> <!-- FINE CONTENT -->

</body>

</html>

Upvotes: 1

Related Questions