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
document.querySelector('.header button').onclick = function() {vypln();}; function vypln() { var paragraphs = document.querySelector(this).parent(".header").find("p"); document.querySelector(".test1").value = paragraphs[0].innerHTML ; document.querySelector(".test2").value = paragraphs[1].innerHTML ; } /* $(".header button").on("click", function() { var paragraphs = $(this).parent().find("p"); $(".test1").val(paragraphs[0].innerHTML); $(".test2").val(paragraphs[1].innerHTML); }); */
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>