How to get JavaScript query to display results in HTML - javascript

Hey I'm trying to get the results of my query to display on my webpage, how can I get that to happen?
I'm running this on oddschecker pages like: http://www.oddschecker.com/horse-racing/thirsk/14:00/winner through a json.manifest, so I want to be able to run this through a chrome extension, how can I get the javascript function to display as a html page??
<html>
<title>I am not very good.</title>
<head>
<script type="text/javascript">
var odds = $('.co');
odds.each(function(){
var id = $(this).attr('id');
if(id.indexOf('_B3') >= 0){
console.log(id);
//your code here
}
});}
</script>
</head>
<body>
<div id="oddschecker"></div>
</body>
</html>

<html>
<title>I am not very good.</title>
<head>
<script type="text/javascript">
var odds = $('.co');
odds.each(function() {
var id = $(this).attr('id');
if(id.indexOf('_B3') >= 0) {
console.log(id);
$('#oddschecker').html(data); // data is the retrieval data
}
});
}
</script>
</head>
<body>
<div id="oddschecker"></div>
</body>
</html>

Related

How can I make a variable be the select Id in a getElement

How can I make a variable be the select Id in a getElement? When I tried it, it returned null. My code is shown below:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
document.getElementById(test).innerHTML = "complete";
</script>
</body
</html>
That code seems to work just fine (with the exception of the unclosed body tag), here is a runnable version of the code, fixed:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
document.getElementById(test).innerHTML = "complete";
</script>
</body>
</html>
Remember, the js code is going to happen almost immediately, so you won't be able to see the "hi" part. If you want it to change after like 1 second, use this:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
setTimeout(function () {
document.getElementById(test).innerHTML = "complete";
}, 1000);
</script>
</body>
</html>
All I changed in that, is put the document.getElementById() into a setTimeout
Hope this helped.

I am getting "undefined" when making an HTTP get request, but only the first time

I am getting "undefined" when making an HTTP get request, but only the first time I make the request. The second time and on the code seems to work perfectly fine.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
let myData = "";
let dataTest = "";
$(document).ready(function(){
$("button").click(function(){
$.get("https://api.coinmarketcap.com/v1/ticker/ethereum/", function(data, status){
myData = data[0];
});
document.getElementById("p1").innerHTML = (myData.price_usd);
});
});
</script>
</head>
<body>
<p>If you want to get the price of Ethereum, press the following button:</p>
<button>Submit</button>
<p id="p1">
</p>
</body>
Put the assignment into the innerHTML in the get asynchronous request's callback. You don't know when your call will be finished, so why you need to write it in the callback. at the first time, you assign then the call is finished
$(document).ready(function(){
$("button").click(function(){
$.get("https://api.coinmarketcap.com/v1/ticker/ethereum/", function(data, status){
myData = data[0];
document.getElementById("p1").innerHTML = (myData.price_usd);
});
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
let myData;
let dataTest;
$(document).ready(function(){
$("button").click(function(){
$.get("https://api.coinmarketcap.com/v1/ticker/ethereum/", function(data, status){
myData = data[0];
logg();
});
});
});
function logg(){
document.getElementById("p1").innerHTML = (myData.price_usd);
}
</script>
</head>
<body>
<p>If you want to get the price of Ethereum, press the following button:</p>
<button>Submit</button>
<p id="p1">
</p>
</body>
Because its async and when ever it is finished assigning data[0] to myData, THEN you will change the innerHtml of document.

save contact to android application using cordova

I have this code:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
function saveContact(wtspNum) {
var myContact = navigator.contacts.create({"displayName": "AnyScan"});
var name = new ContactName();
name.givenName = "example";
name.familyName = " ";
contact.name = name;
var phoneNumbers = [];
phoneNumbers[0] = new ContactField('mobile', wtspNum);
contact.phoneNumbers = phoneNumbers;
contact.save();
};
</script>
</head>
<body>
</script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("/app/conInfo.php",function(result){
$.each(result, function(i, field){
$("#contact").append("<a href='javascript:saveContact("+field.wtspNum+");'><img src='/im/wtsp.jpg'></a>");
});
});
});
</script>
<div id="contactInfo" >
<div id="contact" ></div>
</div>
</body>
</html>
I want that when someone press the picture, it will call the saveContact function and save a number to the contact list of an android phone. Any help please..
I have made a php file in the server side that create a vcf card file then dowloaded to the cell phone.. I haven't find another way to do that

Javascript/JSON error: not well formed

I am testing putting a text editor on my page and storing it as part of a JSON object.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"> </script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
<link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css"/>
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<form method="post" action="formSubmit.js">
<textarea name ="editor"></textarea>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
JS
$(document).ready(function () {
var text = $("editor").val();
var name = "project name";
var id = 5;
var item = new item(name, text, id);
var itemArray = localStorage.items;
if (itemArray == undefined) {
itemArray = [];
} else {
itemArray = JSON.parse(itemArray);
}
itemArray.push(item);
localStorage.items = JSON.stringify(itemArray);
});
I want to be able to store item in a JSON object. When I run this I receive a "not-well formed" error at line 1 of the Javascript. It's a very simple program I'm running and can't seem to pinpoint what is causing the error. Is the JSON done incorrectly or are scripts in my HTML header causing issues?
$("editor") is looking for an html tag called 'editor'. you probably want to attach an id attribute to your and do $('#editor')

google Custom Search api in a js file

First I found the demo in google doc:
<html>
<head>
<title>JSON/Atom Custom Search API Example</title>
</head>
<body>
<div id="content"></div>
<script>
function hndlr(response) {
// handle result
}
</script>
<script src="https://www.googleapis.com/customsearch/v1?key=KEY&cx=cx&q=cars&callback=hndlr">
</script>
</body>
</html>
And it works fine.
But know I want to trigger the "search process" inside a js file say mySearch.js, so how can I get this done ?
example:
var XXXLayer = cc.Layer.extend({
init:function () {
this._super();
var theUrl = 'https://www.googleapis.com/customsearch/v1?key=KEY&cx=cx&q=cars&callback=hndlr';
// what to do here ???????
return true;
},
hndlr:function(response) {
// handle result
}
});
Any suggestion would be appreciated thanks :)
You could add a script element, when you trigger the search process.
function triggersearch(){
var query=document.getElementById("query").value;
var JSElement = document.createElement('script');
JSElement.src = 'https://www.googleapis.com/customsearch/v1?key=KEY&cx=KEY&q='+query+'&callback=hndlr';
document.getElementsByTagName('head')[0].appendChild(JSElement);
}
using the code from #RamK, do the following:
index.html:
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="query"></div>
<script src="cs.js"></script>
</body>
</html>
cs.js:
var key = "your api key"; // API KEY
var id = "your custom search engine id"; // CSE ID
var q = "cats"; // QUERY
function hndlr(response) {
console.log(response); // a way to see your results
}
function triggersearch(){
var query=document.getElementById("query").value;
var JSElement = document.createElement('script');
JSElement.src = `https://www.googleapis.com/customsearch/v1?key=${key}&cx=${id}&q=${q}`+query+'&callback=hndlr';
document.getElementsByTagName('head')[0].appendChild(JSElement);
}
triggersearch();

Categories