105 lines
3.1 KiB
HTML
105 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JS Intro</title>
|
|
<style>
|
|
.header {
|
|
background-color: black;
|
|
color: beige;
|
|
border: solid red 1px;
|
|
text-align: center;
|
|
font-size: x-large;
|
|
padding: 10px;
|
|
}
|
|
|
|
div.color1 {
|
|
background-color: bisque;
|
|
color: black;
|
|
}
|
|
|
|
div.color2 {
|
|
background-color: brown;
|
|
color: lightblue;
|
|
}
|
|
|
|
div.card {
|
|
background-color: grey;
|
|
color: blueviolet;
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h3>Introduksjon til JavaScript</h3>
|
|
<ol>
|
|
<li>Finne frem til en tagg</li>
|
|
<li>Endre HTML</li>
|
|
<li>Trekke ut som funksjon</li>
|
|
<li>kalle andre funksjoner<br /></li>
|
|
</ol>
|
|
<h3>Så bruker vi JavaScript til dette</h3>
|
|
<ol>
|
|
<li>Åpne og Lukke</li>
|
|
<li>Velge hode</li>
|
|
</ol>
|
|
<div class="card">
|
|
<div class="header color1" onclick="newText()"><b>Overskrift A</b>
|
|
</div>
|
|
<div id="tag1"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="header color2" onclick="noClick()"><b>Overskrift B</b></div>
|
|
<div id="tag2"></div>
|
|
</div>
|
|
<h3>Bla opp og ned</h3>
|
|
<div style="display: flex;" id="numbersAndButtons">
|
|
|
|
</div>
|
|
<script>
|
|
showNumber1();
|
|
function newText() {
|
|
blankAll();
|
|
document.getElementById('tag1').innerHTML = /*HTML*/ `
|
|
<h1>Ny tekst 1</h1>`;
|
|
}
|
|
function noClick() {
|
|
blankAll();
|
|
document.getElementById('tag2').innerHTML = '<h2>Ikke trykk</h2>'
|
|
}
|
|
function blankAll() {
|
|
document.getElementById('tag1').innerHTML = '';
|
|
document.getElementById('tag2').innerHTML = '';
|
|
}
|
|
function showNumber1() {
|
|
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
|
<button onclick="showNumber4">◀</button>
|
|
<div style="width: 40px; text-align: center;">1</div>
|
|
<button onclick="showNumber2">▶</button>
|
|
`;
|
|
function showNumber2() {
|
|
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
|
<button onclick="showNumber1">◀</button>
|
|
<div style="width: 40px; text-align: center;">2</div>
|
|
<button onclick="showNumber3">▶</button>
|
|
`;
|
|
function showNumber3() {
|
|
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
|
<button onclick="showNumber2">◀</button>
|
|
<div style="width: 40px; text-align: center;">3</div>
|
|
<button onclick="showNumber4">▶</button>
|
|
`;
|
|
function showNumber4() {
|
|
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
|
<button onclick="showNumber3">◀</button>
|
|
<div style="width: 40px; text-align: center;">1</div>
|
|
<button onclick="showNumber1">▶</button>
|
|
`;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |