<!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: 200px; text-align: center;">
<img src="img/head1.png">
</div>
<button onclick="showNumber2()">▶</button>
`;
}
function showNumber2() {
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
<button onclick="showNumber1()">◀</button>
<div style="width: 200px; text-align: center;">
<img src="img/head2.png">
</div>
<button onclick="showNumber3()">▶</button>
`;
}
function showNumber3() {
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
<button onclick="showNumber2()">◀</button>
<div style="width: 200px; text-align: center;">'
<img src="img/head3.png">
</div>
<button onclick="showNumber4()">▶</button>
`;
}
function showNumber4() {
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
<button onclick="showNumber3()">◀</button>
<div style="width: 200px; text-align: center;">
<img src="img/head4.png">
</div>
<button onclick="showNumber1()">▶</button>
`;
}
</script>
</body>
</html>