I am trying to append an image into a span, it works perfectly outputting the image path as text using:
homeTeamName_span.appendChild(homeTeamName_crest);
However, when trying to wrap image tags around it, it doesn't do anything and no data will load because of it.
What would be the reason for this?
homeTeamName_span.appendChild("<img src='homeTeamName_crest' />");
Function source
window.onload = function() {
var xmlhttp = new XMLHttpRequest();
var url = "http://bushell.net/football/site/includes/webservice.php?service=allfixtures&limit=10&competition=427";
var url2 = "http://bushell.net/football/site/includes/webservice.php?service=allfixtures&limit=10&competition=426"
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
getECL(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function getECL(response) {
var ECL_arr = JSON.parse(response);
var i;
//add 6hrs
var ecl_games = document.getElementById("ecl-games");
for(i = 0; i < ECL_arr.length; i++) {
var gameInfo_container = document.createElement("LI");
ecl_games.appendChild(gameInfo_container);
var homeTeamName_span = document.createElement("SPAN");
homeTeamName_span.className = "text-right";
var homeTeamName_text = document.createTextNode(ECL_arr[i].homeTeamName);
homeTeamName_span.appendChild(homeTeamName_text);
gameInfo_container.appendChild(homeTeamName_span);
var date_span = document.createElement("SPAN");
date_span.className = "d-g";
var date_span_text = document.createTextNode(ECL_arr[i].date);
date_span.appendChild(date_span_text);
gameInfo_container.appendChild(date_span);
var awayTeamName_span = document.createElement("SPAN");
awayTeamName_span.className = "text-left";
var awayTeamName_text = document.createTextNode(ECL_arr[i].awayTeamName);
awayTeamName_span.appendChild(awayTeamName_text);
gameInfo_container.appendChild(awayTeamName_span);
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
getPrem(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url2, true);
xmlhttp.send();
function getPrem(response){
var prem_arr = JSON.parse(response);
var prem_games = document.getElementById("prem-games");
for(var j = 0; j<prem_arr.length; j++) {
var gameInfo_container = document.createElement("LI");
prem_games.appendChild(gameInfo_container);
var homeTeamName_span = document.createElement("SPAN");
homeTeamName_span.className = "text-right";
var homeTeamName_text = document.createTextNode(prem_arr[j].homeTeamName);
var homeTeamName_crest = document.createTextNode(prem_arr[j].homeTeamCrest);
homeTeamName_span.appendChild("<img src='homeTeamName_crest' />");
homeTeamName_span.appendChild(homeTeamName_text);
gameInfo_container.appendChild(homeTeamName_span);
var date_span = document.createElement("SPAN");
date_span.className = "d-g";
var date_span_text = document.createTextNode(prem_arr[j].date);
date_span.appendChild(date_span_text);
gameInfo_container.appendChild(date_span);
var awayTeamName_span = document.createElement("SPAN");
awayTeamName_span.className = "text-left";
var awayTeamName_text = document.createTextNode(prem_arr[j].awayTeamName);
awayTeamName_span.appendChild(awayTeamName_text);
gameInfo_container.appendChild(awayTeamName_span);
}
console.log("loop finished");
}
}
this shoud work , if homeTeamName_crest is the path of the picture
$(homeTeamName_span).append("<img src='"+homeTeamName_crest+"' />")
What if you do this?
var homeTeamName_crest = prem_arr[j].homeTeamCrest; // <--- change this line, don't make it a textNode
homeTeamName_span.appendChild("<img src='" + homeTeamName_crest + '/>"); // <--- change this line, we want to interpolate the string as the path to the image
Related
I have this script that should execute at window.onload, populating the html elements from a parsed JSON through XMLHttpRequest. The console log doesn't throw any errors but the script does nothing.
Also I'm running this on a virtual server if it makes any difference.
var filename = document.getElementById('filename').innerHTML
var lang = localStorage.getItem('language')
var xml = new XMLHttpRequest();
var url ="../assets/lang/"+lang+"/"+filename+".json"
var common ="../assets/lang/"+lang+"/!area_common.json"
window.onload = check;
function check(){
if (lang === null){
window.location.href = "lang.html";
setTimeout(check, 300);
}else{
setTimeout(pop, 1);
setTimeout(comm, 10);
};
function comm(){ //this won't work
xml.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var com = JSON.parse(this.responseText);
document.getElementById("colpick").firstElementChild.innerHTML=com.colpick;
document.getElementById("csquare").title=com.csquare;
document.getElementsByClassName("notes")[0].firstElementChild.innerHTML=com.notes;
document.getElementById("textArea").placeholder=com.textArea;
document.getElementById("save").innerHTML=com.save;
document.getElementById("wipe").innerHTML=com.wipe;
}
};
xml.open("GET", common, true);
xml.send();
};
function pop(){// also this won't work
xml.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var file = JSON.parse(this.responseText);
var dist_lore = document.getElementsByClassName("lore")[0]//tried also with class name;
var lore01 = document.getElementById("lore01")//all these are divs with an <h2> and a <p> inside;
var lore02 = document.getElementById("lore02");
var lore03 = document.getElementById("lore03");
var lore04 = document.getElementById("lore04");
var lore05 = document.getElementById("lore05");
var lore06 = document.getElementById("lore06");
var lore07 = document.getElementById("lore07");
var lore08 = document.getElementById("lore08");
var lore09 = document.getElementById("lore09");
var lore10 = document.getElementById("lore10");
var lore11 = document.getElementById("lore11");
var lore12 = document.getElementById("lore12");
var lore13 = document.getElementById("lore13");
var lore14 = document.getElementById("lore14");
var lore15 = document.getElementById("lore15");
var lore16 = document.getElementById("lore16");
var lore17 = document.getElementById("lore17");
var lore18 = document.getElementById("lore18");
var lore19 = document.getElementById("lore19");
var lore20 = document.getElementById("lore20");
var lore21 = document.getElementById("lore21");
var lore22 = document.getElementById("lore22");
var lore23 = document.getElementById("lore23");
var lore24 = document.getElementById("lore24");
var lore25 = document.getElementById("lore25");
var lore26 = document.getElementById("lore26");
var lore27 = document.getElementById("lore27");
var lore28 = document.getElementById("lore28");
var lore29 = document.getElementById("lore29");
var lore30 = document.getElementById("lore30");
dist_lore.getElementsByTagName("h2")[0].innerHTML=file.dist_lore[0];
lore01.getElementsByTagName("h2")[0].innerHTML=file.lore01[0];
lore02.getElementsByTagName("h2")[0].innerHTML=file.lore02[0];
lore03.getElementsByTagName("h2")[0].innerHTML=file.lore03[0];
lore04.getElementsByTagName("h2")[0].innerHTML=file.lore04[0];
lore05.getElementsByTagName("h2")[0].innerHTML=file.lore05[0];
lore06.getElementsByTagName("h2")[0].innerHTML=file.lore06[0];
lore07.getElementsByTagName("h2")[0].innerHTML=file.lore07[0];
lore08.getElementsByTagName("h2")[0].innerHTML=file.lore08[0];
lore09.getElementsByTagName("h2")[0].innerHTML=file.lore09[0];
lore10.getElementsByTagName("h2")[0].innerHTML=file.lore10[0];
lore11.getElementsByTagName("h2")[0].innerHTML=file.lore11[0];
lore12.getElementsByTagName("h2")[0].innerHTML=file.lore12[0];
lore13.getElementsByTagName("h2")[0].innerHTML=file.lore13[0];
lore14.getElementsByTagName("h2")[0].innerHTML=file.lore14[0];
lore15.getElementsByTagName("h2")[0].innerHTML=file.lore15[0];
lore16.getElementsByTagName("h2")[0].innerHTML=file.lore16[0];
lore17.getElementsByTagName("h2")[0].innerHTML=file.lore17[0];
lore18.getElementsByTagName("h2")[0].innerHTML=file.lore18[0];
lore19.getElementsByTagName("h2")[0].innerHTML=file.lore19[0];
lore20.getElementsByTagName("h2")[0].innerHTML=file.lore20[0];
lore21.getElementsByTagName("h2")[0].innerHTML=file.lore21[0];
lore22.getElementsByTagName("h2")[0].innerHTML=file.lore22[0];
lore23.getElementsByTagName("h2")[0].innerHTML=file.lore23[0];
lore24.getElementsByTagName("h2")[0].innerHTML=file.lore24[0];
lore25.getElementsByTagName("h2")[0].innerHTML=file.lore25[0];
lore26.getElementsByTagName("h2")[0].innerHTML=file.lore26[0];
lore27.getElementsByTagName("h2")[0].innerHTML=file.lore27[0];
lore28.getElementsByTagName("h2")[0].innerHTML=file.lore28[0];
lore29.getElementsByTagName("h2")[0].innerHTML=file.lore29[0];
lore30.getElementsByTagName("h2")[0].innerHTML=file.lore30[0];
dist_lore.getElementsByTagName("p")[0].innerHTML=file.dist_lore[1];
lore01.getElementsByTagName("p")[0].innerHTML=file.lore01[1];
lore02.getElementsByTagName("p")[0].innerHTML=file.lore02[1];
lore03.getElementsByTagName("p")[0].innerHTML=file.lore03[1];
lore04.getElementsByTagName("p")[0].innerHTML=file.lore04[1];
lore05.getElementsByTagName("p")[0].innerHTML=file.lore05[1];
lore06.getElementsByTagName("p")[0].innerHTML=file.lore06[1];
lore07.getElementsByTagName("p")[0].innerHTML=file.lore07[1];
lore08.getElementsByTagName("p")[0].innerHTML=file.lore08[1];
lore09.getElementsByTagName("p")[0].innerHTML=file.lore09[1];
lore10.getElementsByTagName("p")[0].innerHTML=file.lore10[1];
lore11.getElementsByTagName("p")[0].innerHTML=file.lore11[1];
lore12.getElementsByTagName("p")[0].innerHTML=file.lore12[1];
lore13.getElementsByTagName("p")[0].innerHTML=file.lore13[1];
lore14.getElementsByTagName("p")[0].innerHTML=file.lore14[1];
lore15.getElementsByTagName("p")[0].innerHTML=file.lore15[1];
lore16.getElementsByTagName("p")[0].innerHTML=file.lore16[1];
lore17.getElementsByTagName("p")[0].innerHTML=file.lore17[1];
lore18.getElementsByTagName("p")[0].innerHTML=file.lore18[1];
lore19.getElementsByTagName("p")[0].innerHTML=file.lore19[1];
lore20.getElementsByTagName("p")[0].innerHTML=file.lore20[1];
lore21.getElementsByTagName("p")[0].innerHTML=file.lore21[1];
lore22.getElementsByTagName("p")[0].innerHTML=file.lore22[1];
lore23.getElementsByTagName("p")[0].innerHTML=file.lore23[1];
lore24.getElementsByTagName("p")[0].innerHTML=file.lore24[1];
lore25.getElementsByTagName("p")[0].innerHTML=file.lore25[1];
lore26.getElementsByTagName("p")[0].innerHTML=file.lore26[1];
lore27.getElementsByTagName("p")[0].innerHTML=file.lore27[1];
lore28.getElementsByTagName("p")[0].innerHTML=file.lore28[1];
lore29.getElementsByTagName("p")[0].innerHTML=file.lore29[1];
lore30.getElementsByTagName("p")[0].innerHTML=file.lore30[1];
}
};
xml.open("GET", url, true);
xml.send();
}
}
Note that I have a similar script working fine:
var filename = document.getElementById('filename').innerHTML
var lang = localStorage.getItem('language')
var xmlhttp = new XMLHttpRequest();
var url ="assets/lang/"+lang+"/!"+filename+".json";
var loc = window.location.pathname;
window.onload = check;
function check(){
if (lang === null){
window.location.href = "lang.html";
setTimeout(check, 300);
}else{
setTimeout(pop, 1);
};
function pop(){
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var file = JSON.parse(this.responseText);
if (filename == "index"){
document.getElementsByTagName("title")[0].innerHTML=file.title;
document.getElementById("search").placeholder=file.search;
document.getElementById("settings").innerHTML=file.settings;
}else if (filename == "settings"){
document.getElementById("settings").innerHTML=file.settings;
var info = document.getElementsByClassName("info")[0];
info.getElementsByTagName("h2")[0].innerHTML=file.h2[0];
info.getElementsByTagName("p")[0].innerHTML=file.p[0];
info.getElementsByTagName("p")[1].innerHTML=file.p[1];
info.getElementsByTagName("p")[2].innerHTML=file.p[2];
//
info.getElementsByTagName("h2")[1].innerHTML=file.h2[1];
info.getElementsByTagName("p")[3].innerHTML=file.p[3];
info.getElementsByTagName("p")[4].innerHTML=file.p[4];
//
info.getElementsByTagName("h2")[2].innerHTML=file.h2[2];
info.getElementsByTagName("p")[5].innerHTML=file.p[5];
info.getElementsByTagName("p")[6].innerHTML=file.p[6];
document.getElementById("fileDownload").innerHTML=file.download;
//
info.getElementsByTagName("h2")[3].innerHTML=file.h2[3];
info.getElementsByTagName("h2")[4].innerHTML=file.h2[4];
}else if (filename == "about"){
var info = document.getElementsByClassName("info")[0];
info.getElementsByTagName("p")[0].innerHTML=file.p[0];
info.getElementsByTagName("p")[1].innerHTML=file.p[1];
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
}
Any suggestions?
I have made 2 .js files with the scripts inside them which are then called by app.html
I'm trying to call both the spot price and 24hr rolling percentage change from Binance rest API. My problem is that it prints the percentage change in the spot pricing HTML element. I think it has something to do with the percentage symbol ID being the same as the spot price symbol ID but I'm not sure.
What did I do wrong?
Here are the finance rest API docs.
HTML
<div class="div-block-3">
<div class="text-block-2"><span class="currency-title">USD</span> <span class="currency-symbol">$</span><strong id="BTCUSDT" class="rates">11,794.00</strong></div>
<div id="BTCUSDT" class="text-block-6"><strong class="negative">-1.84%</strong></div>
</div>
24hr rolling percentage .js
function load() {
var url_base = "https://api.binance.com/api/v3/ticker/24hr?symbol="
var elements = document.getElementsByClassName('text-block-6');
for (var i = 0; i < elements.length; i++) {
var id = elements[i].id;
var url = url_base + id;
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', url, true);
ourRequest.onload = function () {
console.log(this.responseText);
var obj = JSON.parse(this.responseText);
document.getElementById( obj.symbol ).innerHTML = obj.priceChangePercent;
};
ourRequest.send();
}
}
window.onload = load;
spot pricing .js
function load() {
var url_base = "https://api.binance.com/api/v3/ticker/price?symbol="
var elements = document.getElementsByClassName('rates');
for (var i = 0; i < elements.length; i++) {
var id = elements[i].id;
var url = url_base + id;
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', url, true);
ourRequest.onload = function () {
console.log(this.responseText);
var obj = JSON.parse(this.responseText);
document.getElementById( obj.symbol ).innerHTML = obj.price;
};
ourRequest.send();
}
}
window.onload = load;
I should loop this json file to javascript, all the entries are important and must be retrieved.
I need to make this json compatible with this javascript code.
This is my json file:
{ "user_token":"6664e310e87f75ad4fd5674a976f8310", "lesson_language":"it_de", "language_app":"it", "main_levels":[ { "level":"1_it_de" }, { "level":"5_it_de" } ] }
This is my code javascript:
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
var user_token = arr[0].user_token;
for(i = 0; i < arr.length; i++) {
var level = arr[i].level;
out += user_token;
}
document.getElementById("id01").innerHTML = out;
}
var jsonInput={ "user_token":"6664e310e87f75ad4fd5674a976f8310", "lesson_language":"it_de", "language_app":"it", "main_levels":[ { "level":"1_it_de" }, { "level":"5_it_de" } ] }
function myFunction(arr) {
var out = "";
var i;
var userLabel=''
var user_token = arr.user_token;
mainArrObj=arr.main_levels
for(i = 0; i < mainArrObj.length; i++) {
var level = mainArrObj[i].level;
out += user_token + ' ';
userLabel += level + ' ';
}
console.log('user_token :'+out);
console.log('userLabel :'+userLabel);
}
myFunction(jsonInput)
this javascript is working on desktop but not on mobile browsers. Is there an edit which could resolve this?
The script send the results to a questionnaire to a google document to pull out the results. It works ok on a desktop browser but no luck on mobiles.
<script>
var myForm = document.getElementById("questionnaire");
if (myForm) {
myForm.onsubmit = function(evt) {
evt.preventDefault();
var questionDiv = document.getElementById('question-div');
var busyDiv = document.getElementById('busy');
var resultDiv = document.getElementById('result-div');
var resultList = document.getElementById('result-list');
var xhr = new XMLHttpRequest();
var url = "https://script.google.com/macros/s/AKfycbzGx6a6eogfVTaKD_3a4kiLBZfcdD5GMoonNsSSY1-sCCJfPDI/exec";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var result = response.result;
for (var i in result) {
var e = result[i];
if (e) {
var li = document.createElement('li');
if (e.url) {
var a = document.createElement('a');
a.href = e.url;
a.textContent = e.name;
li.appendChild(a);
} else {
li.textContent = e.name;
}
resultList.appendChild(li);
}
}
busyDiv.hidden = true;
resultDiv.hidden = false;
}
}
var form = document.getElementById('questionnaire');
var formData = new FormData(form);
var fields = ['name','email','yob','gender','income','asset','q1','q2','q3','q4','q5','q6','q7','q8','q9','q10'];
var params = [];
for (var i in fields) {
var field = fields[i];
params.push(field + "=" + formData.get(field));
}
xhr.send(params.join('&'));
questionDiv.hidden=true;
busyDiv.hidden=false;
return false;
};
}
</script>
<script type="text/javascript">
function getNews() {
var xmlhttp = new XMLHttpRequest();
var url = "http://192.168.2.100:7172/SchoolyServiceModel1004/rest/newsservice/news";
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var news = JSON.parse(xmlhttp.responseText);
showNews(news);
}
}
}
};
function showNews(news) {
var i, ntitle, ncontent, ndate, nid;
for (i = 0; i < news.length; i++) {
ndate = news[i].PublishDate;
**ntitle = cur[i].title;** /// this object i want to use as
id attribute of anchor tag
or li
nid = news[i].id;
ncontent = news[i].content;
var cont = document.getElementById("cont");
var div1 = document.getElementById("div1");
var panelHead = document.getElementById("Heading");
var NewsHead = document.getElementById("NewsHead");
var head = document.getElementById("head");
div1.setAttribute("class", " col-md-3 panel panel-primary");
panelHead.setAttribute("class", "panel-heading");
NewsHead.setAttribute("class", "panel-title");
head.appendChild(document.createTextNode("News Title"));
panelHead.appendChild(head);
panelHead.appendChild(NewsHead);
div1.appendChild(panelHead);
div1.style.marginTop = "10px";
var div2 = document.getElementById("div2");
div2.style.marginTop = "10px";
div2.setAttribute("class", " col-md-9 col-md-offset-0 panel panel-primary");
var panelHead = document.getElementById("NewsDesc");
var Title = document.getElementById("Title");
panelHead.setAttribute("class", "panel panel-heading");
Title.appendChild(document.createTextNode("News"));
panelHead.appendChild(Title);
var ul = document.createElement("ul");
var li = document.createElement("li");
var a = document.createElement("a");
**a.setAttribute("id",ntitle);** /// here i want to use
ntitle object as id
attribute of li
a.setAttribute("href", "#");
a.appendChild(document.createTextNode(ntitle));
li.appendChild(a);
ul.appendChild(li);
div1.appendChild(ul);
cont.appendChild(div1);
cont.appendChild(div2);
$(document).ready(function () {
$("li").click(function () {
$("#cur[i].title").click(function () {
$("#h1").text(ntitle);
$("#p1").text(ncontent);
//p1.setAttribute("class", "jumbotron");
});
});
});
cont.appendChild(document.createElement("hr"));
}
}
</script>
In your for loop couldn't you just construct the li elements as strings and use jQuery's insert function?