Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <!--
https://openclassrooms.com/forum/sujet/associer-un-lien-a-une-fonction-aleatoire
-->
<h1>Charger un lien aléatoirement</h1>
<div class="mise-en-page">
  <div class="bloc-mise-en-page">
    <p>Dans cet exemple, le lien (<a target="_blank" href="http://www.aliasdmc.fr/balise/zone_html_a.html#NMjPWX00000.codepen">A</a>) est créé sous la forme d'une chaine de caractères contenant du HTML et est insérée dans un <a target="_blank" href="http://www.aliasdmc.fr/balise/zone_html_div.html#NMjPWX00000.codepen">DIV</a></p>
    <div id="blocLien0"></div>
  </div>
  <div class="bloc-mise-en-page">
    <p>Dans cet exemple, le lien (<a target="_blank" href="http://www.aliasdmc.fr/balise/zone_html_a.html#NMjPWX00000.codepen">A</a>) est créé sous la forme objet <a target="_blank" href="http://www.aliasdmc.fr/dom_javascript_html#NMjPWX00000.codepen">Dom HTML A</a> est inséré dans un <a target="_blank" href="http://www.aliasdmc.fr/balise/zone_html_div.html#NMjPWX00000.codepen">DIV</a> via la méthode <a target="_blank" href="http://www.aliasdmc.fr//dom_javascript/javascript_node_appendchild.html#NMjPWX00000.codepen">appendChild()</a></p>
    <div id="blocLien1"></div>
  </div>
  <div class="bloc-mise-en-page">
    <p>Dans cet exemple, le lien (<a target="_blank" href="http://www.aliasdmc.fr/balise/zone_html_a.html#NMjPWX00000.codepen">A</a>) est présent au chargement et on le modifie directement en temps qu'<a target="_blank" href="http://www.aliasdmc.fr/coursjavas/cours_javascript83.html#NMjPWX00000.codepen">objet HTML A</a></p>
    <div id="blocLien2"><a target="_blank" href="https://www.google.fr/?q=Hallyday%20-%20Marie">29|Johnny Hallyday - Marie</a></div>
  </div>
</div>
<hr>
<label> Ne propose qu'une seule fois la chanson , tient compte des liesn dèjà affichés.<input type="checkbox" onchange="onlyOne(event)" id="onlyone" value="onlyone"></label>
<button type="button" onclick="changer()">Change les liens</button>
<ol id="blocLien3"><li>29|Johnny Hallyday - Marie</li></ol>
<button type="button" onclick="viderlog()">Vide les logs</button>
<hr>
<div class="mise-en-page-lien">
  <div class="bloc-mise-en-page bloc-lien">
    <h2>Liens Javascript utiles</h2>
    <ul>
      <li><a href="https://www.zonecss.fr/cours-css-javascript/les-selecteurs-javascript.html#NMjPWX00000.codepen" target="_blank">Les sélecteurs Javascript</a></li>
      <li><a href="http://www.aliasdmc.fr/dom_javascript_html/javascript_html_a.html#NMjPWX00000.codepen" target="_blank">L'objet A - Cours Javascript</a></li>
      <li><a href="http://www.aliasdmc.fr/coursjavas/cours_javascript89.html#NMjPWX00000.codepen" target="_blank">Assigner un événement DOM 2 - Cours Javascript</a></li>
      <li><a href="http://www.aliasdmc.fr/dom_javascript/javascript_node_removechild.html#NMjPWX00000.codepen" target="_blank">Dom CORE : Objet Node.removeChild()</a></li>
      <li><a href="http://www.aliasdmc.fr/dom_javascript/javascript_node_appendchild.html#NMjPWX00000.codepen" target="_blank">Dom CORE : Objet Node.appendChild()</a></li>
      <li><a href="http://www.aliasdmc.fr//coursjavas/cours_javascript76.html#NMjPWX00000.codepen" target="_blank">Définition Array.splice()</a></li>
      <li><a href="http://www.aliasdmc.fr//coursjavas/cours_javascript75.html#NMjPWX00000.codepen" target="_blank">L'objet Math - Cours Javascript</a></li> 
    </ul></div>
  <div class="bloc-mise-en-page bloc-lien bloc-sites">
    <h2>Sites</h2>
    <ul>
      <li><a href="https://www.zonecss.fr/#NMjPWX00000.codepen" target="_blank" title="Glossaire CSS">Zone CSS</a></li>
      <li><a href="http://www.aliasdmc.fr/#NMjPWX00000.codepen" target="_blank" title="Glossaire HTML/JAVASCRIPT">Zone (X)HTML</a></li>
      <li><a href="https://web-color.aliasdmc.fr/#NMjPWX00000.codepen" target="_blank" title="Couleurs pour le WEb (#,rgb,hsl)">Couleurs Web</a></li>
      <li><a href="https://outils-css.aliasdmc.fr/#NMjPWX00000.codepen" target="_blank">Outils CSS</a></li>
      <li><a href="https://outils-javascript.aliasdmc.fr/#NMjPWX00000.codepen" target="_blank">Outils Javascript</a></li>
    </ul>
  </div>
</div>
            
          
!

CSS

            
              [id^="blocLien"]{
  border:1px solid grey;
  padding:5px;
}
#blocLien3{
  padding-left:25px;
}
.red{color:red}

/* MISE EN PAGE */
.bloc-mise-en-page{
  flex : 1 1 0px;
  min-width:500px;
}
            
          
!

JS

            
              /* ///////////////////////////////////////////
Plus d'informations liées à la solution  : 
//////////////////////////////////////////////
## Les sélecteurs Javascript
https://www.zonecss.fr/cours-css-javascript/les-selecteurs-javascript.html#NMjPWX00000.codepen
## L'objet A - Cours Javascript
http://www.aliasdmc.fr/dom_javascript_html/javascript_html_a.html#NMjPWX00000.codepen
## Assigner un événement DOM 2 - Cours Javascript
http://www.aliasdmc.fr/coursjavas/cours_javascript89.html#NMjPWX00000.codepen
## Dom CORE : Objet Node.removeChild()
http://www.aliasdmc.fr/dom_javascript/javascript_node_removechild.html#NMjPWX00000.codepen
## Dom CORE : Objet Node.appendChild()
http://www.aliasdmc.fr/dom_javascript/javascript_node_appendchild.html#NMjPWX00000.codepen
## Définition Array.splice()
http://www.aliasdmc.fr//coursjavas/cours_javascript76.html#NMjPWX00000.codepen
## L'objet Math - Cours Javascript
http://www.aliasdmc.fr//coursjavas/cours_javascript75.html#NMjPWX00000.codepen
*/ 
/*
Toutes le fonctions ci-dessous peuvent être optimisées
elles sont même volontairement non optimisées
Elles sont là juste pour vous présenter le concept à vous de les améliorer 
*/

var aChanson =   [{'nom':"0|Edith Piaf - La vie en rose",'url':'https://www.google.fr'},
                  {'nom':"1|Le roi lion - l'histoire de la vie " ,'url':'https://www.google.fr'},
                  {'nom':"2|Celine dion - My Heart Will Go On",'url':'https://www.google.fr'},
                  {'nom':"3|Serge Gainsbourg - Le poinçonneur des Lilas",'url':'https://www.google.fr'},
                  {'nom': "4|Michel Berger - La groupie du pianiste",'url':'https://www.google.fr'},
                  {'nom': "5|Johnny Hallyday - Allumer le feu",'url':'https://www.google.fr'},
                  {'nom': "6|Jean Pierre Mader - Macumba",'url':'https://www.google.fr'},
                  {'nom': "7|Daniel Balavoine - Le chanteur",'url':'https://www.google.fr'},
                  {'nom': "8|Renaud - Mistral gagnant",'url':'https://www.google.fr'},
                  {'nom': "9|Renaud - Hexagone",'url':'https://www.google.fr'},
                  {'nom': "10|Calogero - En apesanteur",'url':'https://www.google.fr'},
                  {'nom': "11|Calogero - Face a la mer",'url':'https://www.google.fr'},
                  {'nom': "12|Olivia Ruiz - La femme chocolat",'url':'https://www.google.fr'},
                  {'nom': "13|Vanessa Paradis - La Seine",'url':'https://www.google.fr'},
                  {'nom': "14|Kyo - Derniere danse",'url':'https://www.google.fr'},
                  {'nom': "15|Kyo - Le chemin",'url':'https://www.google.fr'},
                  {'nom': "16|Nekfeu - On verra" ,'url':'https://www.google.fr'},
                  {'nom': "17|Booba - DKR" ,'url':'https://www.google.fr'},
                  {'nom': "18|Sexion d'assaut - Ma direction",'url':'https://www.google.fr'},
                  {'nom': "19|Orelsan - Plus rien ne m'étonne",'url':'https://www.google.fr'},
                  {'nom': "20|Vianney - Pas là",'url':'https://www.google.fr'},
                  {'nom': "21|Maitre gims - J'me tire" ,'url':'https://www.google.fr'},
                  {'nom': "22|Raphaël - Caravane",'url':'https://www.google.fr'},
                  {'nom': "23|Jean Jacques Goldman - Envole moi",'url':'https://www.google.fr'},
                  {'nom': "24|Jean Jacques Goldman - Quand la musique est bonne",'url':'https://www.google.fr'},
                  {'nom': "25|Renand Luce - La lettre",'url':'https://www.google.fr'},
                  {'nom': "26|Marc Lavoine - Elle a les yeux Revolver",'url':'https://www.google.fr'},
                  {'nom': "27|Telephone - Un autre monde",'url':'https://www.google.fr'},
                  {'nom': "28|Claude François - Comme d'habitude",'url':'https://www.google.fr'},
                  {'nom':"29|Johnny Hallyday - Marie",'url':'https://www.google.fr'}
                 ];


/**
  * 
  */
function htmlChaine(){
  var oChanson = getChanson(),
      oDiv = document.getElementById("blocLien0"); 
  oDiv.innerHTML = '<a href="'+oChanson['url']+'?q='
    +oChanson['nom']+'" target="_blank">'
    +oChanson['nom']+'</a>';  
}//fct

/**
  * 
  */
function domObject(){
  var oChanson = getChanson(),
      oA = document.createElement('a'),
      oDiv = document.getElementById("blocLien1"); 
  oA.target ='_blank';
  oA.href = oChanson['url']+'?q='+oChanson['nom'];
  oA.innerText = oChanson['nom']; 
  while(oDiv.hasChildNodes()==true){ 
    oDiv.removeChild(oDiv.childNodes[0]);
  }//while
  oDiv.appendChild(oA);  
}//fct

/**
  * 
  */
function setObject(){
  var oChanson = getChanson(),
      oDiv = document.getElementById("blocLien2"),
      oA = oDiv.firstChild; 
  oA.setAttribute('target','_blank');
  oA.setAttribute('href',oChanson['url']+'?q='+oChanson['nom']);
  oA.innerText = oChanson['nom']; 
}//fct

/**
  * Récupère un index aléatoirement
  */
function randomInt(max){
  return Math.floor(Math.random() * Math.floor(max));
}//fct

/**
  * Récupère une chanson
  * @return Object oChanson
  */
function getChanson(){
  var  bOne = document.getElementById("onlyone").checked,
      iIndex = randomInt(aChanson.length),
      oChanson = aChanson[iIndex];
  //On l'ajoute au tableau des chansons dèjà passées
  window['oChansonTmp'].push(oChanson);
  //si la chanson ne doit être affiche qu'une fois 
  if(bOne == true){ 
    //Supprime la chanson du tableau
    aChanson.splice(iIndex,1);
  }
  debuger(oChanson);
  /*
  Si la tableau n'a plus de chanson 
  on le remplie avec le tableau des chansons dèjà passées
  */
  if(aChanson.length==0 && window['oChansonTmp'].length>0){
    aChanson = window['oChansonTmp'];
    window['oChansonTmp'] = [];
  }//if
  return oChanson;
}
/**
  * Gestion de la checkbox 
  * @param Event oEvent
  */
function onlyOne(oEvent){
  var oCheckbox = oEvent.currentTarget,
      iNbTmp = window['oChansonTmp'].length;
  viderlog();
  if(oCheckbox.checked == false && window['oChansonTmp'].length > 0){
    //On fusionne le tableau des chansons avec celui les chansons déjàs passées 
    aChanson =  aChanson.concat(window['oChansonTmp']);
    window['oChansonTmp'] = [];
  }else if(oCheckbox.checked == true && window['oChansonTmp'].length > 0){
    //On supprime du tableau des chansons les chansons déjàs passées 
    for(var i = 0; i < iNbTmp ;i++){
      for(var h = 0; h < aChanson.length ;h++){
        if(window['oChansonTmp'][i] == aChanson[h]){
          aChanson.splice(h,1); 
          break;
        }//if
      }//for
    }//for
  }//else
}//fct


/**
  * Affiche les Chansons traitées
  * @param Object oChanson
  */
function debuger(oChanson){
  var  oDiv = document.getElementById("blocLien3");
  oDiv.innerHTML += '<li>'+oChanson['nom']+'</li>'; 
  if(aChanson.length==0){
      oDiv.innerHTML += '<li class="red">Tous les liens ont été traités, on reprend la liste de départ</li>'; 
  }//if
}//fct

/**
  * Vide les logs
  */
function viderlog(){
  var  oDiv = document.getElementById("blocLien3");
  oDiv.innerHTML = ''; 
}//fct

/**
  * 
  */
function changer(){
  htmlChaine()
  domObject();
  setObject();
}//fct

document.addEventListener('DOMContentLoaded',function(){
  window['oChansonTmp']=[aChanson[aChanson.length-1]];
  htmlChaine();domObject();       
});
            
          
!
999px

Console