3

this.style.background="#000";のようにdivにインラインを入れるonclick="this.style.background="#000";と、うまくいきます。しかし、それを関数に入れて同じonclickイベントから関数を呼び出すと、機能しません。ただし、関数に別のことをさせると (アラート ボックスを表示するなど)、機能します。どうしたの？

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
    width: 48px;
    height: 48px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-color:red;
    border: 1px solid black;
}
</style>
</head>

<body>
<div class="tile" onclick="myFunction()"></div>

<script>
function myFunction() {
    this.style.background="#000000";
}
</script>

</body>

</html>
4

3 に答える 3

5

jQueryが含まれていることに気付きました。マークアップと JavaScript を分離することを強く検討する必要があります。そのルートに行く場合、次のようになります。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
    width: 48px;
    height: 48px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-color:red;
    border: 1px solid black;
}
</style>
</head>

<body>
<div class="tile"></div>

<script>
$(function () {
    $(".tile").click(function () {
        $(this).css('background-color', '#000000');
    });
});
</script>

</body>

</html>

例: http://jsfiddle.net/6zAN7/9/

于 2013-02-17T18:54:39.817 に答える