JavaScript - niespodzianka w Chrome

0 

<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.

0

https://www.w3schools.com/jsref/met_loc_reload.asp
Sekcja: Definition and Usage

0

Z założenia JS nie powinien działać inaczej, więc z tego wynika że Chrome nie odczytuje value w ten sposób. Strona na W3shools ginie mi po odświeżeniu w Chrome, w FF zaś nie.

Cała strona jest wczytywana ponownie, a wartości nie są przechowywane w zmiennych. FF źle działa bo mimo tego strona jest wczytywana ponownie program działa, wartości siedzą w inputach po odświeżeniu, więc po kolejnym odświeżeniu są pobierane. Jak inaczej pobrać wartości z inputów?

Metoda reload () służy do ponownego załadowania bieżącego dokumentu.
Metoda reload () działa tak samo jak przycisk reload w przeglądarce.
Domyślnie metoda reload () ponownie ładuje stronę z pamięci podręcznej, ale można zmusić ją do ponownego załadowania strony z serwera, ustawiając parametr forceGet na true: location.reload (true).

nie pomogło.

0 
function canvasColor() {
            canvas.style.backgroundColor = color.value;
            console.log("wywołanie canvasColor()");
}

tak działa

1 użytkowników online, w tym zalogowanych: 0, gości: 1