11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je suis débutant en dev et j'apprends actuellement le javascript.
Je bosse sur un petit projet , qui me demande de refaire la page d’accueil google (en HTML) et ensuite derajouter du javascript pour cacher les éléments centraux (chose que j'ai réussi à faire). Ensuite on me demande de faire une redirection vers la page correspondante lorsqu’on fait une recherche et qu'on clique sur le bouton "Recherche Google". Là je suis bloqué , j'ai essayé mais je n'y arrive vraiment pas. Je sais qu'il faut que je récupère les données saisies en Get et ensuite rediriger vers cette page.... Hel please!!
Ci-dessous mon code HTML et ensuite le javacript inséré

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav>
      <ul>
        <li> <a href="http://mail.google.com">Gmail</a></li>
        <li> <a href="https://www.google.com/imghp?hl=fr&tab=wi&ei=wh1dWayuOcOpUeuWssgL&ved=0EKouCBcoAQ">Images</a></li>
      </ul>
    </nav>
    <button type="button" onclick="cacherElements(this,'container');"> AFFICHER LES ELEMENTS CENTRAUX</button>

  <div id="container" style="display:none">
      <div class="logo"> <img src="logo.png" alt=" logo google" /></div>
      <div class="centre">
      <form  action="index.html" method="GET" name="find" id ="redirection" >
      <input type="text" name="recherche" title="Rechercher"> <br>
      <input id ="contenu" type="submit" name="Recherche" value="Recherche Google">
      <input type="submit" name="J'ai de la chance" value="J'ai de la chance">
      </form>
      </div>
  </div>

<footer>
<ul>
  <li> <a href="https://www.google.com/intl/fr/ads/?fg=1"> Publicité</a></li>
  <li> <a href="https://www.google.com/services/?fg=1#?modal_active=none">Entreprise</a></li>
  <li> <a href="https://www.google.com/intl/fr/about/"> A propos</a></li>
  <li class="conf"> <a href="https://www.google.com/intl/fr/policies/privacy/?fg=1">Confidentialités</a></li>
  <li class="cond"> <a href="https://www.google.com/intl/fr/policies/terms/?fg=1"> Conditions</a></li>
  <li class="param"> <a href="https://www.google.com/preferences?hl=fr&fg=1">Paramètres</a></li>
</ul>
</footer>
<script src="main.js"></script>
  </body>
</html>



function cacherElements(bouton,id) {
  var formulaire = document.getElementById('container');
  if (formulaire.style.display =='none') {
    formulaire.style.display = "block";
    bouton.style.display ="none";
  }else{
    bouton.innerHTML = "AFFICHER LES ELEMENTS CENTRAUX"
  }
}

document.querySelector('#form').addEventListener('submit', function(e) {
  var redirection = document.querySelector('#contenu')
  window.location.href('http://google.fr?')
})