Script ne fonçtionne pas

Résolu
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>
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 40050 Statut Modérateur 4 754
 
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...

0
Utilisateur anonyme
 
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
0
jordane45 Messages postés 40050 Statut Modérateur 4 754
 
Tu dois retirer les mots qui sont dans ta liste
et pour ton code js... tu as un ; en trop.
Il faut juste 
 init = function(){
        for (var i = 0; i< dictionary.length; i++) {
        document.getElementById('word_list').innerHTML += "<li onclick='show(" + i +")'>" + dictionary[i].word + "</li>";
        }
    }
0
Utilisateur anonyme
 
ç a marché merci beacoup jordan45 problème résolu maintenemt je peux passer à l'étape suivante du bouton search
0
Utilisateur anonyme
 
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>
0
Utilisateur anonyme
 
c'est bon ça fonction maintenemt en fait il fallait ecrire dictionary et pas Dictionary in this line : 

if (query == Dictionary[i].word)

Résolu Merci
0

Discussions similaires

recherche script "les visiteurs"
stoukboy -
brucine -

22 réponses
Problème Avast "HTML:Script-inf"
AWM-Erwan56 -
JF -

17 réponses
Script : plusieurs documents en un seul PDF + arborescence
rb12000 -
barnabe0057 -

14 réponses
Erreur script (Googletagmanager)
PJV666 -
db77 -

8 réponses
une erreur est survenue dans le script de cette page
PichuDory -
ChariduP -

3 réponses