Script ne fonçtionne pas
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Salut j'ai suivi à la lettre le code et les instructions d'un tutoriel sur youtube https://www.youtube.com/watch?v=_MnNjyDSMgk&t=210s montrant comment réaliser un simple dictionnaire pour débutant en Javascript. Le code ne fonctione pas pour moi voici le code :
<!DOCTYPE html>
<html>
<head>
<title>English Dictionary</title>
</head>
<style>
body {
font-size:20px;
}
.header {
width: 50%;
margin: 40px auto 0px;
color: white;
background: #483D8B;
text-align: center;
border: 1px solid gray;
border-radius: 8px 8px 0px 0px;
}
.wrapper {
width: 50%;
margin: 0px auto;
border:1px solid gray;
}
.wrapper:after {
content: "";
display: block;
clear:both;
}
.words {
width: 29%;
background: #dcdcdc;
padding-top: 10px;
float: left;
}
.word {
width: 69%;
float: left;
padding-left: 10px;
}
#word_list {
max-height: 400px;
overflow-y: scroll;
}
li {
list-style-type: none;
line-height: 1.4em;
}
li:hover {
cursor: pointer;
color: #483D8B;
}
ul {
margin-left: -10px;
}
h3 {
color: #483D8B;
}
#search {
margin-left: 10px;
width: 60%;
padding: 5px;
height: 13px;
}
button {
height: 27px;
background: #483D8B;
color: white;
border: none;
border-radius: 4px;
}
</style>
<body>
<div class="header">
<h1>English Dictionary</h1>
</div>
<div class="wrapper">
<div class="words">
<input type="text" id="search" placeholder="search...">
<button onclick="search()">Go</button>
<ul id="word_list">
<li>apple</li>
<li>baby</li>
<li>car</li>
<li>computer</li>
<li>mosquito</li>
</ul>
</div>
<div class="word">
<h3 id="word_text"></h3>
<p id="definition"></p>
<hr>
<h3>Related words:</h3>
<li id="related"></li>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var dictionary = [
{
word:"apple",
def:"A round fruit with seeds in its center",
rel:["mango","pear","guava"]
},
{
word:"baby",
def:"The young one of a human",
rel:["child","toddler","teen"]
},
{
word:"car",
def:"Transports poaple from place to place",
rel:["bus","bicycle","truck"]
},
{
word:"computer",
def:"An electronic device",
rel:["laptop","tablet","palmtop"]
},
{
word:"mosquito",
def:"An insect",
rel:["ant","beetle","butterfly"]
},
];
// fill the dictionary with words
init = function(){
for (var i = 0; i< dictionary.length; i++) {
document.getElementById('word_list').innerHTML += "<li onclick='show(" + i +")'>"; +
dictionary[i].word + "</li>";
}
}
// call the init function when page loads
init();
// display the word, its definition and related words
show = function(i){
document.getElementById('word_text').innerHTML = dictionary[i].word;
document.getElementById('definition').innerHTML = dictionary[i].def;
var list = "";
for (var j = 0; j < dictionary[i].rel.length; j++) {
list += "<li>" + dictionary[i].rel[j] + "</li>";
document.getElementById('related').innerHTML = list;
}
}
show(0);
</script>
1 réponse
-
Bonjour,
Déjà... le script se place avant le </body> ... pas après le </html>.
Ensuite.. ton bouton déclenche la fonction search() ... sauf que.. ben.. cette fonction n'est pas dans le code que tu nous montres...
-
pour le bouton search c'est l'étape suivante parceque j'ai arreter de coder normalement là ou je suis arrivé dans le code html quand je clique sur le mot car ça affiche la definition mais comme ça ne marche pas j'arrete á ce niveau ey je passe pas au bouton search ce que je comprent pas c'est que ça march dans le tuto puisque il montre les resultats en avançant dans le code je pense peut etre que le javascript sur mon pc ne marche pas bien je ne sais pas je suis vraiment deçu
-
Tu dois retirer les mots qui sont dans ta liste
et pour ton code js... tu as un ; en trop.
Il faut justeinit = function(){ for (var i = 0; i< dictionary.length; i++) { document.getElementById('word_list').innerHTML += "<li onclick='show(" + i +")'>" + dictionary[i].word + "</li>"; } } -
-
maintenent la fonction search ne marche pas
// search functionality
search = function(){
query = document.getElementById('search').value;
if (query == "") {
return;
}
found = -1; // initialize found to false
for (var i = 0; i < dictionary.length; i++) {
if (query == Dictionary[i].word) {
found = i;
break;
}else {
document.getElementById('word_text').innerHTML = "Word not found";
document.getElementById('definition').innerHTML = "The word you entered is not found in our dictionary";
document.getElementById('related').innerHTML = "No related words";
}
}
if (found >= 0) {
show(found);
}
}
</script>
</body>
</html> -
-
