Warum funktioniert der Code nicht?
Mein folgender Code funktioniert einfach nicht. Ich hoffe, jemand weiß eine Lösung.
<!DOCTYPE html>
<html>
<head>
<style>
output {
float: right;
padding: 1em;
border: medium solid;
box-shadow: 5px 10px 15px;
</style>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>html Editor</title>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<h1>HTML5-Farbwähler für Text und Hintergrund</h1>
<label for="color">Schriftfarbe</label>
<input id="color" type="color" list="selfPalette" value ="#c82f04">
<datalist id="selfPalette">
<option value="#c82f04"></option>
<option value="#df6c20"></option>
<option value="#dfac20"></option>
<option value="#93b946"></option>
<option value="#337599"></option>
<option value="#8c4bb4"></option>
<option value="#ffffff"></option>
<option value="#000000"></option>
</datalist>
<p>hex-Wert: <code id="color_val"></code></p>
<label for="background">Hintergrundfarbe</label>
<input id="background" type="color" value="#ffffff">
<p>hex-Wert: <code id="background_val"></code></p>
<output contenteditable>
<h2>editierbare Überschrift</h2>
<p>Dies ist ein Text, den Sie aber auch verändern können.</p>
</output>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function() {
var color = document.querySelector('#color),
color_val = document.querySelector('#color_val'),
background = document.querySelector('#background'),
background_val = document.querySelector('#background_val'),
output = document.querySelector('output');
color.addEventListener('change', changeStyle);
background.addEventListener('change', changeStyle):
function changeStyle() {
output.style.color = color.value;
output.style.backgroundColor = background.value;
color_val.innerHTML = color.value;
background_val.innerHTML = background.value;
}
});
</script>
</body>
</html>
(1 votes)
Loading...
In the line in which you open the
In the line in which you select the color element, the closing quotation mark (') is missing at the end of the selector. Change 'color to 'color'.
In the line in which you select the background element, the closing quotation mark (') is also missing at the end of the selector. Change 'background to 'background'.
In the line in which you select the background_val element, the closing quotation mark (') is missing at the end of the selector. Change 'background_val to 'background_val'.
In the line in which you select the output element, the closing quotation mark (') is missing at the end of the selector. Change 'output to 'output'.
In the line where you add the change event lister for the background element, you have a typing error. Change changeStyle): to changeStyle);.
To change the font and background color, you need to easily adjust the code. Here is the corrected code which the font and background color of the
-element based on selected color values changes:
Now the font color and background color of the
Another mistake should be corrected: neither h2 still p. In a outputElement. best to exchange outputelement against a typical container like div out.
I agree that a little SUS is already using 2 variable on a complete web page for dynamic design.
What doesn’t work?
I want to change color with code font and background
May I copy the code to check it, and to edit it?
I’m not doing anything with the code.
If he works, I’ll delete him again.
I’m asking about the right on the code,
Okay, tomorrow afternoon, I’d have time.
Are you okay?
Yes, if they could help me with this, I would be happy