Hilfe mit einem Script

-Linix · 19. Oktober 2019

Hallo,

Ich habe folgendes Problem, dass auf dem Bild zusehen ist https://prnt.sc/plm4g1 .

Ich möchte, dass Heavy neben Calais - Duisburg (Road) steht.

Code:

Code

div class="card mb-5">
<div class="card-header">
<b>TruckersMP Stats</b>
</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<h1></h1><p>Server: Simulation 1</p></tr>
<tr>
<td><div id="tes32"></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('#tes32', 'section', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2')
</script>
</div>
<tr><script src="test.js"></script></tr>
</div></td>
-------------------------- test.js
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].severity
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('#tes32', 'section', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2')

Alles anzeigen

basti1012 · 20. Oktober 2019

Du erstellst jedesmal ein <p> Element.

Ein <p> Element fängt normalerweise immer in einer neuer Zeile an.

Es gibt mehre möglichkeit das neben einandwer zu bekommen.

1. Zb alles in ein <p> Element zu schreiben.

2. du erzeugst span Elemente

3.beide <p> Elemente in einen Extra Container packen der Display Flex hat.

usw...

Du benutzt da ja auch Tabellen Elemente , dann erzeug doch td Elementer die von einen <tr> umgeben sind

-Linix · 20. Oktober 2019

Also mit <p> Element hatt es nicht funktioniert und <span> auch nicht

-Linix · 20. Oktober 2019

Können sie mir vllt ein code beispiel zeigen?

basti1012 · 20. Oktober 2019

Dein html ist etwas komisch deswegen geht das mit den span natürlich nicht so einfach. Wenn die <p> nebeneinander gewesen wären dann ja.

Dann baue dir doch eine Tabelle zusammen die du da ja schon Angefangen hast.

Zb so

https://codepen.io/basti1012/pen/bGGBoYo?editors=1100

Die Api ist jetzt egal , das geht ja nur um das erzeugen von tr und td Elemente damit man das nebeneinander kriegen tut.

Du könntest ja auch mal zeigen was du genau vor hast dann kann man das vieleicht auch anders regeln

-Linix · 20. Oktober 2019

Noch ein Problem wenn ich die Tabelle nochmals kopiere und zum 2 mal einfüge funktioniert die 2 nicht.

basti1012 · 20. Oktober 2019

dann zeig mal wie du das gemacht hast.

Zeigt die Console irgendwelche Fehler ?

Denk dran das IDS nur einmal verwendet werden dürfem

-Linix · 20. Oktober 2019

Da kommen zwar fehler aber die haben damit nichts zutun.

Code

<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card mb-4">
<div class="card-header">
<b>TruckersMP Stats</b>
</div>
<div class="card-body">
<table class="table">
<tr>
<th>Server: Simulation 1</th>
</tr>
<tbody>
</tbody>
<script>
function getThem(id, url,a) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'json';
request.send();
request.onload = function () {
var jsonObj = request.response;
var tbody = document.querySelector(id);
var tr = document.createElement('tr');
arra=[jsonObj.response[a].name,jsonObj.response[a].severity,jsonObj.response[a].players];
for(p=0;p<4;p++){
var td = document.createElement('td');
td.textContent =arra[p];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
for(a=0;a<6;a++){
getThem('tbody', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a);//https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a)
}
</script>
</table>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<b>TruckersMP Stats</b>
</div>
<div class="card-body">
<table class="table">
<tr>
<th>Server: Simulation 1</th>
</tr>
<tbody>
</tbody>
<p>
<script>
function getThem(id, url,a) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'json';
request.send();
request.onload = function () {
var jsonObj = request.response;
var tbody = document.querySelector(id);
var tr = document.createElement('tr');
arra=[jsonObj.response[a].name,jsonObj.response[a].severity,jsonObj.response[a].players];
for(p=0;p<4;p++){
var td = document.createElement('td');
td.textContent =arra[p];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
for(a=0;a<6;a++){
getThem('tbody', 'https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a);//https://api.truckyapp.com/v2/traffic/top?server=sim1&game=ets2',a)
}
</script>
</table>
</div>
</div>
</p>

Alles anzeigen

basti1012 · 20. Oktober 2019

Am einfachsten wäre es, wenn du mal die Links zu den APIs gibst und was du genau angezeigt bekommen willst und wie genau .

Du bindest das Script ja auch 2-mal ein und das brauch man auch nicht unbedingt.

* Link entfernt , weil existiert nicht mehr *

Mach doch mal eine Skizze fertig wie es aussehen soll und was du aus welcher API angezeigt bekommen willst.

Wie viele verschiedene API Links hast du den?

Hilfe mit einem Script

Ähnliche Themen

wix.com Bildwechsel per Mouseover/click von Button

Loginscript Zugang zu Strato MySQL Datenbank

Mehrere RSS Feeds kombinieren und in einem DIV ausspielen

[gelöst] mit css animiertes objekt lokalisieren

funktion - set.-get.-checkCookie

Optionen ausblendbar verhält sich unterschiedlich

Tags