2017-08-14 7 views
0

私はすべての関連する質問を行ってきましたが、解決策のどれも私のために働いていませんでした。私はJavaScriptにとって非常に新しいので、JavaScriptで作成したリストをクリック可能なアイテムにする方法については混乱しています。最近の試みでは、クリック時にアラートポップアップを表示しようとしましたが、代わりにページが読み込まれる2番目のポップアップが表示されます。助けてください!ここに私の現在のコードは次のとおりです。JavaScriptで作成したリスト項目をクリック可能にするにはどうすればよいですか?

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="css/m-buttons.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
div.links{ 
margin: auto; 
border: 3px solid #003366; 
text-align: left; 
max-width: 700px; 
} 
p{ 
font-size: 40px; 
text-align: center; 
} 
li{ 
font-size: 1w; 
} 
body{ 
font-family: verdana; 
} 
</style> 
</head> 
<body> 
<div class = "links"> 
<ul id="blah"></ul> 
<script> 
var testArray = ["One","Two","Three","Four","Five","Six","Seven"]; 
function makeLongArray(array){ 
for(var i = 0; i < 1000; i++){ 
array.push(i); 
} 
} 
makeLongArray(testArray); 
function makeUL(array) { 
    // Create the list element: 
    var list = document.createElement("UL"); 
    list.setAttribute("id", "blah"); 

    for(var i = 0; i < array.length; i++) { 
     // Create the list item: 
     var item = document.createElement("LI"); 

     // Set its contents: 
     item.appendChild(document.createTextNode(array[i])); 

     // Add it to the list: 
     list.appendChild(item); 
     list.onclick = alert("Help."); //this is the code causing the issue. 
    } 

    // Finally, return the constructed list: 
    return list; 
} 

// Add the contents of options[0] to #foo: 
document.getElementById("blah").appendChild(makeUL(testArray)); 
</script> 
</div> 
</body> 
</html> 
+0

私はここで何を求めているのかは分かりませんが、もう少し詳しく説明しますか? –

+0

申し訳ありません。基本的には、javascriptを使って配列を作成し、配列の要素をulに変換します。私は各リスト項目をクリック可能にしたいと思います。 – CSRenA

+1

'onclick'は関数に代入されることを期待していますので、' alert( "Help。") 'の返り値を代入しています。 'alert'はすぐに実行されます。匿名関数でラップしてください –

答えて

1

あなたがのonclickイベントに機能を割り当てる必要があります。

list.onclick = function(){ alert("Help."); } 
+0

ありがとうございます。これはうまくいった!私はあなたの答えを5分で受け入れます。 – CSRenA

2

あなたの既存のコードを使用すると、コードlist.onclick = alert("Help.");

の行を実行alert('Help.')するたびに実行されますあなたがする必要があるのはonclickに関数を割り当てることです。この関数は、onclickが実行されると実行されます。次のように:

item.onclick = function() {console.log('hello world');};

は今、各リスト項目のOnClickイベントは、毎回リスト項目がクリックされたコンソールにハロー世界を出力し、それに割り当てられた機能を持っています。

関連する問題