0

こんにちは私はjavaScriptを学び、サイトで3つのボタンを使用して段落のフォントサイズを変更しようとしていますが、コードを書いているときにコンソールがこのエラーを出力し、それが何であるかを理解できません。私はまた、それをコーディングする方法が正しいかどうかを知りたいです。どうもありがとうございました。

htmlコード：

<!DOCTYPE html>
<html leng="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi ejercicio DHTML</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <script type="text/javascript" src="js/codigo.js"></script>
    </head>
    <body>
        <p id="parrafo">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.
        </p>
        <span class="boton" id="boton1">Fuente pequeña</span>
        <span class="boton" id="boton2">Fuente mediana</span>
        <span class="boton" id="boton3">Fuente grande</span>
    </body>
</html>

css：

p {
    font-size: 13px;
    margin-bottom: 2em;
}
.boton {
    background: red;
    padding: .5em 1em;
}

javascript：

window.addEventListener('load', inicio, false);

function inicio() {
    var indice = [1, 2, 3];
    for (var i = 0; i < indice.length; i++) {
        var boton = document.getElementById('boton' + indice[i]);
        boton.addEventListener('click', cambiarFuente, false);
    };
}

function cambiarFuente() {
    console.log('hola');
}

そして最後にエラー：

Uncaught TypeError: Cannot call method 'addEventListener' of null codigo.js:6

注目してくれてありがとう:)

さて、私は前にタグを配置しました、そして今それは少なくとも私がそう思うもので動作しています....別の問題が発生し、段落がそのフォンサイズを変更しないということですが、それでも動作しているようにコンソールログメッセージを受け取ります：/

window.addEventListener('load', inicio, false);

function inicio(){
var indice =[1,2,3];
for (var i = 0; i < indice.length; i++) {
    var boton = document.getElementById('boton' + indice[i]);
    boton.addEventListener('click', cambiarFuente, false);
};

function cambiarFuente(){
    var parrafo = document.getElementById('parrafo');
    parrafo.style.fontSize=20;
    console.log('hola');
}
}

また、各ボタンxDに異なるフォントサイズを割り当てる方法もわかりません。誰かが私に何かを提案できますか？

4

2 に答える 2

2

document.getElementByIdがnullを返す場合、指定されたIDを持つ要素が見つからなかったことを意味します。この場合、ページが読み込まれる前にスクリプトが実行されているためです。

ロードイベントの後に関数を呼び出します。

window.onload = function() {
   // stuff to run onload
};

追加の予防策は、メソッドを呼び出そうとする前に、getElementByIdが要素（または少なくともnull以外のもの）を返すことを確認することです。

編集

また、Mahesh Sapkalが指摘しているように、8未満（おそらく9？）のIEはサポートされていないためaddEventListener、を使用する必要がありますattachEvent。機能検出に基づいていずれかを使用する「addEvent」関数がいくつかあります。簡単なものを次に示します。

  function addListener(element, event, fn) {

    // Use addEventListener if available
    if (element.addEventListener) {
      element.addEventListener(event, fn, false);

    // Otherwise use attachEvent, set this and event
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, (function (el) {
        return function() {
          fn.call(el, window.event);
        };
      }(element)));

      // Break closure and primary circular reference to element
      element = null;
    }
  }

ループは次のようになります。

var boton;

for (var i = 0; i < indice.length; i++) {
    boton = document.getElementById('boton' + indice[i]);

    if (boton) {
          addListener(boton, 'click', cambiarFuente);
    }
}

ifブロックの後にセミコロンがないことに注意してください。これはステートメントではありません（通常はステートメントが含まれていますが）。

于 2013-03-26T03:42:21.293 に答える
1

次の代わりにこの方法を使用できます。

window.addEventListener('load', inicio, false);

これを使って：

$(document).ready(function(){
    inicio();
});

そして関数で：

function inicio(){
    var indice =[1,2,3];
    for (var i = 0; i < indice.length; i++) {
        var boton = $('#boton' + indice[i]);
        boton.click(function(){
            cambiarFuente();
        });
    }
}

スクリプトが機能しなかった理由は、ドキュメントが読み込まれる前でもスクリプトを実行しているためです。簡単な修正の1つは、の<script></script>前にを配置すること</body>です。見てみな。

于 2013-03-26T03:45:14.187 に答える