115 lines
3.4 KiB
HTML
115 lines
3.4 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: 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> |