Passare div a funzione javascript e cambiare il suo stile

Sto cercando di passare un div id di una funzione javascript che fa qualcosa di semplice come cambiare il colore di sfondo del div.

Cosa strana è che il mio codice funziona in w3schools.com Tryit editor, ma non in JSFiddle. Inoltre, non funziona nel mio compilatore (Coda 2).

Questo è anche il modo giusto di procedere? Ecco il mio codice:

<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
    asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>

<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>

</body>
</html>

ed ecco il JSFiddle roba: http://jsfiddle.net/BH9Rs/

OriginaleL’autore Ryan Tuck | 2013-10-17

5 Replies
  1. 3

    È necessario utilizzare document.getElementById per ottenere l’elemento da id

    function changeBackgroundColor(asdf){
        document.getElementById(asdf).style.backgroundColor = "#fff000";
    }

    e passare l’id come questo (tra virgolette)

    <button onclick="changeBackgroundColor('myDiv')"> 

    E nel tuo violino mettere la tua funzione all’interno della Head sezione.
    (selezionare no-wrap in Testa) a sinistra del Quadro e opzione di Estensione

    Js Violino Demo

    OriginaleL’autore Sachin

  2. 1

    Modificare lo script placement combo per no wrap - in <head> (seconda casella combinata sul pannello di sinistra)

    Qui hai una demo

    OriginaleL’autore Claudio Redi

  3. 0

    myDiv è uno sconosciuto identificatore.

    Utilizzare document.getElementById() per consultare il div:

    <button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>

    Inoltre, è necessario spostare il codice JS nel tuo codice HTML, a causa della jsFiddle ambiente: http://jsfiddle.net/BH9Rs/1/

    <script>
        function changeBackgroundColor(asdf) {
            asdf.style.backgroundColor = "#fff000";
        }
    </script>
    <div id="myDiv" style="background:red">this is my div</div>
    <button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>

    OriginaleL’autore ComFreek

  4. 0

    Stili Inline inline e fare clic su eventi? boo.

    <div id="myDiv"> this is my div </div>
    <button id="clickMe"> Set background color </button>
    
    <script>
        document.getElementById('clickMe').onclick = function(){
            document.getElementById('myDiv').style.backgroundColor = '#fff000';
        }
    </script>
    Vecchio DOM eventi? Boo 😀
    sì, ho pensato id andare a piccoli passi, piuttosto che mostrare addEventListener e attachEvent sintassi.

    OriginaleL’autore PlantTheIdea

  5. 0

    Si mast:

        <!DOCTYPE html>
    <html>
    <head>
    <script>
    function changeBackgroundColor(asdf)
    {
        document.getElementById(asdf).style.backgroundColor = "#fff000";
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv" style="background:red"> this is my div </div>
    <button onclick="changeBackgroundColor('myDiv')"> Set background color </button>
    
    </body>
    </html>

    OriginaleL’autore vadim.zhiltsov

Lascia un commento