getElementById（function_parameter）

Question

getElementById(function_parameter)の使い方は？

function myFunction(param1){ 
     document.getElementById(param1).style.color="#E66C2C"; 
} 

ここでparam1は動的に渡されるIDで、上記のコードを使用するとIE11で次のエラーが発生します。それは以下のように呼ばれている

「プロパティを取得することができません未定義またはnull参照の 『スタイル』」：

<a class="someClass1" id="customID1" name="customName1" onClick="javascript:myFunction('customID1');">Custom1</a> 
 

 
<a class="someClass2" id="customID2" name="customName2" onClick="javascript:myFunction('customID2');">Custom2</a> 
 

 
<a class="someClass3" id="customID3" name="customName3" onClick="javascript:myFunction('customID3');">Custom3</a>

Answer 1

コードが働いていた、それはタイプミスのちょうどいっぱいでした。

1. 最初のaは機能するために間違ったパラメータを送信します。
2. すべてonclickを開始として"ですが、終了しません。以下は

作業抜粋です：

function myFunction(param1) { 
 
    document.getElementById(param1).style.color = "#E66C2C"; 
 
}

<a class="someClass1" id="customID1" name="customName1" onClick="javascript:myFunction('customID1',this);">Custom</a> 
 

 
<a class="someClass2 " id="customID2" name="customName2 " onClick="javascript:myFunction('customID2');">Custom2</a> 
 

 
<a class="someClass3" id="customID3" name="customName3" onClick="javascript:myFunction('customID3');">Custom3</a>

良い方法

だけclassにより結合して、targetを使用します。

//The function that handles the click 
 
//This function takes the event and the desired class as arguments 
 
function handleClick(e, c, func) { 
 
    e = e || window.event; 
 
    //Get target 
 
    var target = e.target || e.srcElement; 
 
    //Test for right class 
 
    var hasClass = false; 
 
    for (var i = 0; i < target.className.split(" ").length; i++) { 
 
    if (target.className.split(" ")[i] == c.toString()) { 
 
     hasClass = true; 
 
     break; 
 
    } 
 
    } 
 
    if (hasClass === true) { 
 
    func(target); 
 
    } 
 
} 
 

 
//Function to bind click events on class 
 
function bindClassEventClick(cls, func) { 
 
    if (document.body.addEventListener) { 
 
    document.body.addEventListener('click', function(e) { 
 
     handleClick(e, cls, func) 
 
    }, false); 
 
    } else { 
 
    document.body.attachEvent('onclick', function(e) { 
 
     handleClick(e, cls, func) 
 
    }); //for IE 
 
    } 
 
} 
 

 
//Bind event "someClass" click 
 
bindClassEventClick('someClass', function(target) { 
 
    target.style.color = "#E66C2C"; 
 
}); 
 
bindClassEventClick('someClass2', function(target) { 
 
    target.style.color = "red"; 
 
});

<a class="someClass">Custom1</a> 
 
<a class="someClass2">Custom2</a> 
 
<a class="someClass">Custom3</a>

そして再び、この段階であなたにもちょうどjQuery()を実装するかもしれません。

jQueryの

jQueryがDOMとのユーザ対話を容易にするspecif目的のためのライブラリのビルドで、均一なクロスブラウザの動作を生成します。

jQuery(".someClass").on("click", function() { 
 
    jQuery(this).css("color", "#E66C2C") 
 
}); 
 
jQuery(".someClass2").on("click", function() { 
 
    jQuery(this).css("color", "red") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a class="someClass">Custom1</a> 
 
<a class="someClass2">Custom2</a> 
 
<a class="someClass">Custom3</a>