<body>
<div id="menu">
<label>Ustaw kolor tła</label><br />
<input id="changeColor" type="text" />
<label>Szerokość tła</label><br />
<input id="changeWidth" type="text" />
<label>Wysokość tła</label><br />
<input id="changeHeight" type="text" />
<label>Szerokość ramki</label><br />
<input id="frameWidth" type="text" />
<label>Kolor ramki</label><br />
<input id="frameColor" type="text" />
<label>Styl ramki</label><br />
<input id="frameStyle" type="text" />
<button id="enter">Zawierdź</button>
</div>
<section id="canvas"></section>
<script>
var color = changeColor.value;
var width = changeWidth.value;
var height = changeHeight.value;
var Fwidth = frameWidth.value;
var Fcolor = frameColor.value;
var Fstyle = frameStyle.value;
function start() {
canvasColor();
canvasSize();
canvasFrame();
}
function canvasColor() {
canvas.style.backgroundColor = color;
}
function canvasSize() {
canvas.style.width = width;
canvas.style.height = height;
}
function canvasFrame() {
canvas.style.borderWidth = Fwidth;
canvas.style.borderColor = Fcolor;
canvas.style.borderStyle = Fstyle;
}
function refresh() {
location.reload();
}
enter.addEventListener("click", start);
canvas.addEventListener("click", refresh);
</script>
</body>
</html>
Skróciłem na maksa ten toporny kod, uczę się JS więc proszę o wyrozumiałość :) To coś działa mi w FF zaś w Chrome nie. Po wywołaniu akcji z przycisku wartości z inputów są pobierane a element modyfikowany (w FF wartości wpisane w input nie znikają po odświeżeniu, w Chrome tak). W FF działa w Chrome nie. Pomijam "złożoność" aplikacji, po prostu zastanawia co ja właściwie zrobiłem? Nie mam pomysłu.