visuell-teller

This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-16 14:01:43 +02:00
parent 83f69d397d
commit 859f8334d9
12 changed files with 140 additions and 74 deletions

View file

@ -8,6 +8,7 @@
</head>
<style>
#app {
background-color: aqua;
display: grid;
}
</style>

View file

@ -14,7 +14,6 @@
</head>
<body>
<input type="text">color
<div id="minDiv">
Hallo innerHTML
</div>

View file

@ -11,15 +11,21 @@
<div id="app">
</div>
<script>
add('green', 500, "Det", 'div');
add('red', 250, "var", 'h3');
add('blue', 600, "en", 'li');
let count = 0;
add('green', 500, "Det", 'span');
add('red', 250, "var", 'div');
add('blue', 600, "en", 'div');
add('rgb(200, 200, 42)', 500, "gang", 'span');
function add(color, size, word, tagName) {
count++;
let existingHtml = document.getElementById('app').innerHTML;
let newHtml = /*HTML*/ `
<${tagName} style="color:${color}; font-size: ${size}%;">${word}</${tagName}>
<${tagName} style="color:${color}; font-size: ${size}%;">
${word}
${count}
</${tagName}>
`;
document.getElementById('app').innerHTML = existingHtml + newHtml ;
}

View file

@ -7,8 +7,9 @@
</head>
<body>
<div id="output"></div><br>
<button onclick="setNum16(16)">Set Number to 16</button>
<button onclick="setNum47(47)">Set Number to 47</button>
<button onclick="setNum(16)">Set Number to 16</button>
<button onclick="setNum(47)">Set Number to 47</button>
<button onclick="increaseNum()">Increase number by 1</button>
<br><br>
<script>
@ -19,6 +20,10 @@
numToShow = selectedNum;
outputDiv.innerHTML = numToShow;
}
function increaseNum(){
numToShow++;
outputDiv.innerHTML = numToShow;
}
</script>
</body>