Script ne fonçtionne pas

Résolu/Fermé

Utilisateur anonyme - Modifié le 17 févr. 2019 à 18:44
Utilisateur anonyme - 19 févr. 2019 à 14:25

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:

Script ne fonçtionne pas
Script vidéo youtube - Guide
Script bat - Guide
Executeur de script - Télécharger - Édition & Programmation
Ghost script - Télécharger - Polices de caractères
Script bouger souris ✓ - Forum C++

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 févr. 2019 à 21:38

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...

Utilisateur anonyme
17 févr. 2019 à 22:02

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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 févr. 2019 à 23:16

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>";
        }
    }

Utilisateur anonyme
18 févr. 2019 à 14:28

ç a marché merci beacoup jordan45 problème résolu maintenemt je peux passer à l'étape suivante du bouton search

Utilisateur anonyme
18 févr. 2019 à 15:21

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>

Utilisateur anonyme
19 févr. 2019 à 14:25

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

Discussions similaires

recherche script "les visiteurs"

executer un fichier .py sous linux

besoin d'un script

Liste COMPLETE des commandes .bat

virus trojan.script.generic

Discussions similaires

Newsletters