J'ai passé en revue toutes les questions connexes mais aucune des solutions n'a fonctionné pour moi. Je suis extrêmement nouveau en JavaScript et je ne sais pas comment créer une liste que j'ai créée avec JavaScript contenant des éléments cliquables. La tentative la plus récente comprenait la tentative de faire apparaître une alerte au clic, mais à la place, elle n'apparaît qu'à la seconde où la page se charge. Veuillez aider! Voici mon code actuel:

<!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
CSRenA 14 août 2017 à 17:22

2 réponses

Meilleure réponse

Vous devez attribuer une fonction à l'événement onclick:

list.onclick = function(){ alert("Help."); }
1
kinggs 14 août 2017 à 14:29

Votre code existant s'exécutera alert('Help.') chaque fois que vous exécuterez cette ligne de code list.onclick = alert("Help.");

Ce que vous devez faire est d'assigner une fonction à onclick. Cette fonction est ensuite exécutée lors de l'exécution de onclick. Comme suit:

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

Désormais, l'événement onclick de chaque élément de liste a une fonction qui lui est assignée qui renvoie bonjour le monde à la console à chaque fois que l'on clique sur l'élément de liste.

2
Phil 14 août 2017 à 14:32