1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<style>
</style>
<script>
'use strict';
let
n = -1,
images = [];
function addField( src ){
images[ ++n ] = fieldBtnAdd( src );
document.querySelector( "main" ).appendChild( images[ n ] );
}
function fieldBtnAdd( src ){
let
addData = "Hello", // ?
addText = "Bonjour", // ?
elem = document.createElement( 'img' );
switch ( src ){
case 'db':
elem.setAttribute( 'src', 'http://danielhagnoul.developpez.com/images/boule5.png' );
elem.setAttribute( 'alt', 'db.png');
elem.setAttribute( 'title', addData);
elem.setAttribute( 'onclick', 'addField( "txt" )' ); // deuxième image "txt"
break;
case 'txt':
elem.setAttribute( 'src', 'http://danielhagnoul.developpez.com/images/boule2.png');
elem.setAttribute( 'alt', 'edit.png');
elem.setAttribute( 'title', addText);
elem.setAttribute( 'onclick', 'addField( "data" )'); // troisième image "data"
break;
case 'data':
elem.setAttribute( 'src', 'http://danielhagnoul.developpez.com/images/boule3.png');
elem.setAttribute( 'alt', 'data.png');
elem.setAttribute( 'title', addText);
elem.setAttribute( 'onclick', 'alert("data click")'); // alert !
break;
}
return elem;
}
document.addEventListener( 'DOMContentLoaded', ev => {
addField( "db"); // première image "db"
}, false );
window.addEventListener( 'load', ev => {
// Liste les images dans la console (touche F12)
document.querySelector( "#btnImages").addEventListener( "click", ev => {
console.table( images );
}, false );
}, false );
</script>
</head>
<body>
<main>
<div>
<button id="btnImages">Liste les images dans la console (touche F12)</button>
</div>
</main>
</body>
</html> |
Partager