Ich habe da ein Problem. Ich habe ein Javascript welches mir ein
Bargraph zeichnet. Nun ist aber das Problem das es ausschließlich nur
dann auseführt wird wenn die Seite neu geladen wird. Wenn ich das Script
bzw. die dazugehörige Seite über das Menü aufrufe, dann wird dies nicht
geladen.
Das JS script zum Bargraph:
1 | <div id="container"></div>
|
2 | <script src="scripts/progressbar.js"></script>
|
3 | <script>
|
4 | var bar = new ProgressBar.SemiCircle(container,
|
5 | {
|
6 | strokeWidth: 6,
|
7 | color: '#FFEA82',
|
8 | trailColor: '#eee',
|
9 | trailWidth: 1,
|
10 | easing: 'easeInOut',
|
11 | duration: 1400,
|
12 | svgStyle: null,
|
13 | text:
|
14 | {
|
15 | value: '',
|
16 | alignToBottom: false
|
17 | },
|
18 | from: {color: '#FFEA82'},
|
19 | to: {color: '#ED6A5A'},
|
20 | // Set default step function for all animate calls
|
21 | step: (state, bar) =>
|
22 | {
|
23 | bar.path.setAttribute('stroke', state.color);
|
24 | var value = Math.round(bar.value() * 100);
|
25 | if (value === 0)
|
26 | {
|
27 | bar.setText('');
|
28 | } else {
|
29 | bar.setText(value);
|
30 | }
|
31 |
|
32 | bar.text.style.color = state.color;
|
33 | }
|
34 | });
|
35 |
|
36 | bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
|
37 | bar.text.style.fontSize = '2rem';
|
38 |
|
39 | bar.animate(1); // Number from 0.0 to 1.0
|
40 | </script>
|
Wenn ich nun dieses Script direkt beim Seitenlade aufrufe geht es (siehe
Bild) wenn ich nun bei Start eine andere Seite habe (Startseite) und
dann links über das Menü (Round Bar) gehe, funktioniert dies nicht.
Nun wird aber die Seite über ein Query String nachgeladen in dem
Navigationsbereich:
1 | function load_home(siteLink)
|
2 | {
|
3 | fetch(siteLink /*, options */)
|
4 | .then((response) => response.text())
|
5 | .then((html) => {
|
6 | document.getElementById("content").innerHTML = html;
|
7 | })
|
8 | .catch((error) => {
|
9 | console.warn(error);
|
10 | });
|
11 | }
|
Kann dies damit zusammenhängen?
richtig.png
(20 KB)
falsch.png
(14 KB)
