Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="obal"> <div class="header"> <p>nadpis1</p> <p>popis1</p> <button class="test">tlačítko1</button> </div> <div class="header"> <p>nadpis2</p> <p>popis2</p> <button class="test">tlačítko2</button> </div> <div class="header"> <p>nadpis3</p> <p>popis3</p> <button class="test">tlačítko3</button> </div> </div> <div class="pryc"> <input class="readonly test1" type="text" name="nazev" value="" readonly="readonly"> <input class="readonly test2" type="text" name="nazev" value="" readonly="readonly"> <p></p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#obal { display: grid; grid-template-areas: 'prvni druha treti'; background: #ddd; padding: 20px; grid-gap: 20px; margin: 20px 0; } #obal div:nth-child(1) { grid-area: prvni; background: #aaa; padding: 20px } #obal div:nth-child(2) { grid-area: druha; background: #aaa; padding: 20px } #obal div:nth-child(3) { grid-area: treti; background: #aaa; padding: 20px }
CSS
Autoformát
CSS reset
Až na konci
function vypln() { var paragraphs = this.parentNode.querySelectorAll("p"); document.querySelector(".test1").value = paragraphs[0].innerHTML; document.querySelector(".test2").value = paragraphs[1].innerHTML; } var buttons = document.querySelectorAll('.header button'); for (var i = 0; i < buttons.length; ++i) { buttons[i].onclick = vypln; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>