Probleme mit <script>

-Linix · 19. Oktober 2019

Hallo,

Ich habe folgendes Problem wenn ich ein Script mehrmals einbinde, dass es nicht Funktioniert.

Das script habe ich mal Online gestellt https://codepen.io/Elten1/pen/qBWGBVM .

basti1012 · 19. Oktober 2019

kannst du mal etwas genauer erklären was du erreichen willst ?

Wozu willst du das Script mehrmals einbinden ?

-Linix · 19. Oktober 2019

Ich möchte das Scripts mehrmals nutzen, da ich eine andere API einsetzen will

basti1012 · 19. Oktober 2019

So ganz kann ich das nicht verstehen.

Wenn man deine jetzige API nimmt, kann man z. B. alle Daten so holen die da drinnen stehen.

https://basti1012.bplaced.net/…rdner=html-seminar&id=385

Könntest du mal zeigen wie du das meinst?

Auch wenn dein Code nicht läuft, aber poste ihn mal wie du es vorhast damit ich das Verstehen tue.

Du kannst das Script auch 10-mal auf einer Seite nutzen, man muss nur darauf achten, dass man mit den Variablen und anderen Sachen durcheinander kommt.

Dann mach doch mal dein Code mit der anderen API fertig so wie du es versucht hast, dann kapiere ich es besser.

Sempervivum · 19. Oktober 2019

Solch eine Aufgabe kommt öfter vor. Die Lösung lautet: Lege den Code in eine Funktion und übergebe die variablen Parameter:

Code

    <div id="test"></div>
    <section></section>
    <script>
        function getThem(selHeader, selSection, url) {
            function populateHeader(jsonObj) {
                var myH1 = document.createElement('h1');
                myH1.textContent = jsonObj['squadName'];
                header.appendChild(myH1);

                var myPara = document.createElement('p');
                myPara.textContent = '' + jsonObj.response[0].name;
                header.appendChild(myPara);
            }
            var header = document.querySelector(selHeader);
            var section = document.querySelector(selSection);
            var requestURL = url;
            var request = new XMLHttpRequest();
            request.open('GET', requestURL);
            request.responseType = 'json';
            request.send();
            request.onload = function () {
                var superHeroes = request.response;
                populateHeader(superHeroes);
                // showHeroes(superHeroes);
            }
        }
        getThem('#test', 'section', 'https://api.truckyapp.com/v2/traffic/servers')

Alles anzeigen

-Linix · 19. Oktober 2019

Zitat von Sempervivum

<div id="test"></div>
<section></section>
<script>
function getThem(selHeader, selSection, url) {
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);

var myPara = document.createElement('p');
myPara.textContent = '' + jsonObj.response[0].name;
header.appendChild(myPara);
}
var header = document.querySelector(selHeader);
var section = document.querySelector(selSection);
var requestURL = url;
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function () {
var superHeroes = request.response;
populateHeader(superHeroes);
// showHeroes(superHeroes);
}
}
getThem('#test', 'section', 'https://api.truckyapp.com/v2/traffic/servers')

Alles anzeigen

Danke dies hat mir sehr gut geholfen

Probleme mit <script>

Jetzt mitmachen!

Teilen

Tags