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;
Related
I'm trying to retrieve a specific ID from the JSON file depending on user input and then display a picture based on the ID retrieved from the JSON file
function showCard() {
var cardNaqme = document.getElementById('un').value;
var cardNameProper = cardName.replace(/\s/g, '');
var obj = JSON.parse("https://db.ygoprodeck.com/api/v7/cardinfo.php"+cardNameProper)
var imgId = obj["data"][0]["id"]
document.getElementById("chosenCard").src = "https://storage.googleapis.com/ygoprodeck.com/pics_small/"+imgId+".jgp";
event.preventDefault();
}
I think what you need is below but I am not sure I understood your json structure:
var cardNaqme = document.getElementById('un').value;
var cardNameProper = cardName.replace(/\s/g, '');
var oReq = new XMLHttpRequest();
oReq.open("GET", "https://db.ygoprodeck.com/api/v7/cardinfo.php"+cardNameProper", true);
oReq.responseType = "json";
oReq.onload = function(e) {
JSONObject json = new JSONObject(res);
JSONArray ja = json.getJSONArray("data");
JSONObject obj = ja.getJSONObject(0);
var imgId = obj.id;
document.getElementById("chosenCard").src = "https://storage.googleapis.com/ygoprodeck.com/pics_small/"+imgId+".jgp";
}
oReq.send();
I tried to answer your problem after identifying your problem.
function showCard()
{
event.preventDefault();
var cardNaqme = document.getElementById('un').value;
var cardNameProper = cardName.replace(/\s/g, '');
var obj = JSON.parse("https://db.ygoprodeck.com/api/v7/cardinfo.php"+cardNameProper)
var imgId = obj[0].id
document.getElementById("chosenCard").src =
"https://storage.googleapis.com/ygoprodeck.com/pics_small/"+imgId+".jpg";
}
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>
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
<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?
I got a rss feed of a cartoon. how can I check if the URL of the image exists. if not, I have 4 local images and I want to display them in sequential order.
this is what I got:
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://rss.xiffy.nl/foksuk.php");
feed.setNumEntries(1);
feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT)
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var ul = document.createElement("ul");
var li = document.createElement('li');
var entryImageUrl = entry.xmlNode.getElementsByTagName("description")[0].getAttribute("url");
li.innerHTML = '<div id="tekst">' + entry.content + '</div>';
ul.appendChild(li);
container.appendChild(ul);
}
}
});
}
setTimeout((initialize),300);
Try this. Check for 404 Error.
var request = new XMLHttpRequest();
request.open('GET', URL, true);
request.send();
if (request.status === "404") {
alert("Image does not exist");
}