visuell-teller
This commit is contained in:
parent
83f69d397d
commit
859f8334d9
12 changed files with 140 additions and 74 deletions
|
@ -8,6 +8,7 @@
|
|||
</head>
|
||||
<style>
|
||||
#app {
|
||||
background-color: aqua;
|
||||
display: grid;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<input type="text">color
|
||||
<div id="minDiv">
|
||||
Hallo innerHTML
|
||||
</div>
|
||||
|
|
|
@ -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 ;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue