Geo Location Trace getElementById not working - javascript

I am working on a challenge by freecodecamp, Task is to show the local weather and hence I have to get the location of the user. I can get the location from here but after printing that i was trying to getElementById of a div i have printed using JS which gives null in response. I want to get the key value pair so that i can do stuff with them. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Location Trace | freecodecamp Challanges</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="GeoResults"></div>
<script>
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var table_body = "";
var count = 0;
$.each(data, function(k, v) {
//JSON.stringify(j); // '{"name":"binchen"}'
table_body += '<div id=Coun_'+count+'>'+v+'</div>';
//table_body += "<tr><td id='FC_"+count+"'>" + k + "</td><td><b id='SC_"+count+"'>" + v + "</b></td></tr>";
count++;
});
$("#GeoResults").html(table_body);
});
</script>
<script>
var x = document.getElementById('Coun_1') /*= 'Dooone!!!'*/;
console.log(x);
</script>
</body>
</html>
Thanks in Advance!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Location Trace | freecodecamp Challanges</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="GeoResults"></div>
<script>
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var table_body = "";
var count = 0;
$.each(data, function(k, v) {
//JSON.stringify(j); // '{"name":"binchen"}'
table_body += '<div id=Coun_'+count+'>'+v+'</div>';
//table_body += "<tr><td id='FC_"+count+"'>" + k + "</td><td><b id='SC_"+count+"'>" + v + "</b></td></tr>";
count++;
});
$("#GeoResults").html(table_body);
var x = document.getElementById('Coun_1').innerHTML; /*= 'Dooone!!!'*/;
console.log(x);
});
</script>
</body>
</html>

Related

How to display information relative to image clicked using pokemon API?

I'm trying to get and display the image and information of a clicked pokemon from pokemon API
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="pokedex2.js"></script>
<link rel="stylesheet" href="pokedex2.css">
<title>Pokedex v 2.0</title>
</head>
<body>
<div id="all">
<div id="pokemon">
</div>
<div id="chosen">
</div>
</div>
</body>
</html>
JavaScript
$(document).ready(function(){
for(i = 1; i <=151; i ++){
$("#pokemon").append("<img id=pokepic" + i + "
src='http://pokeapi.co/media/img/" + i +
".png'>");
}
var clicked = false;
$("img").click(function(){
clicked = true;
console.log(this);
if(clicked){
$.get("http://pokeapi.co/api/v1/pokemon/" + i +"/", function(data){
var str = "";
str += "<h4>Types</h4>";
str += "<ul>";
var str2 = "";
str2 += "<h4>height</h4>";
str2 += "<ul>";
var str3 = "";
str3 += "<h4>weight</h4>";
str3 += "<ul>";
for(i = 0; i < data.types.length; i ++){
str += "<li>" + data.types[i].name + "</li>";
}
str2 += "<li>" + data.height + "</li>";
str3 += "<li>" + data.weight + "</li>";
str += "</ul>"
str2 += "</ul>"
str3 += "</ul>"
$("#chosen").html(str + str2 + str3); }, "json");
}
else{
clicked = false;
}
})
});
At the moment, the only information being brought up are for the first 3 pokemon in the list, not for the pokemon that was clicked. I need to find the information associated with the clicked pokemon, like a pokedex.
I included console.log to show that whichever image is clicked, the picture, and pokepic ID number associated with that image appear in the console. Instead what I need is for the image and stats associated with each image to appear in the div labeled chosen
Your click event uses the i variable defined in your for loop. Since the function inside the click is always called after the loop is done, i is always 152. You need to read the current pokemon from your click event:
$('img').on('click', function(e){
var pokemonId = e.target.id.split('pokepic')[1];
$.get("http://pokeapi.co/api/v1/pokemon/" + pokemonId +"/", function(data){
...
});
});

Dynamic dropdown in html

Im making a website for school and I needed a dynamic dropdown. I went about making it using this tutorial tutorial.
I have finished the first 6 parts and everything worked. In the last part when the first dropdown should appear it just doesn't. If the question is hard to answer or could have more answers just tell me what comes to mind and ill check.
Ty in advance.
<html>
<head>
<title>askldfjdasklf</title>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width">
</head>
<body>
<label>Starost</label>
<select id="starost"></select><br>
<label>Praznuje</label>
<select id="praznuje"></select><br>
<script src="jquery-3.1.0.min.js"></script>
<script src="script.js"></script>
</body>
<pre>$(document).ready(function ()
{
$.getJSON("get_starost.php", success = function(data)
{
var options = "";
for (var i 0; i < data.length; i++)
{
options += "<option value='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
}
$("#starost").append(options);
});
});
</pre>
<pre>
<?php
require "opendb.php";
$query = "SELECT starost FROM filter_starost";
$data = mysql_query($query, $conn);
$starost = array();
while ($row = mysql_fetch_array($data))
{
array_push($starost, $row["starost"]);
}
echo json_encode($starost);
require "closedb.php";
?>
</pre>
You are missing = i 0in you for loop
for (var i = 0; i < data.length; i++)
{
}
and open web browser console to check errors and for debug. This will help you a lot.
$(document).ready(function ()
{
$.getJSON("get_starost.php", function(data)
{
var options = "";
for (var i= 0; i " + data[i] + "";
}
$("#starost").append(options);
});
});
Replace <pre> with <script>
also remove success =

For loop producing 'undefined' before iteration output

I'm stumped as to why my for loops are displaying "undefined" before any of my actual output occurs. I have all variables declared, and using Inspect Element shows no syntax errors.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
"use strict";
var html, s, vindex;
var v = ['alpha::one::uno', 'beta::two::dos', 'gamma::three::tres'];
for (vindex = 0; vindex < v.length; vindex++) {
s = v[vindex].split('::');
html += '<div class="inline ' + s[0] + '">\n';
html += '<h4>' + s[1] + '</h4>';
html += '' + s[2] + '</div>';
}
$("div").append( html );
});
</script>
</head>
<body>
<div></div>
</body>
</html>
http://jsfiddle.net/a5b6C/1/
The undefined string shows up because html is undefined
var html, s, vindex;
var html; is basically the same thing as var html = undefined;
Set it as an empty string.
var html = "", s, vindex;

Can i use this JS code for Google adsense

I see this type of JS codes on so many website for Google adsense ad units.
<!DOCTYPE HTML>
<html>
<head>
<title>Adsense Test</title>
</head>
<body>
<script type="text/javascript">
google_ad_type = 'text';
google_gl = 'default';
google_kw = 'vps';
google_kw_type = 'broad';
google_ad_client = 'ca-xxxxxxxxxxxxxxxx';
google_ad_output = 'js';
google_adtest = 'on';
google_feedback = 'on';
google_language = 'en';
google_encoding = 'utf8';
google_max_num_ads = '20';
function google_ad_request_done(google_ads)
{
var s = '';
var i;
for (i=0;i<google_ads.length;++i)
{
s += '<div class="gad-slot"><pre>';
s += '<strong>'+google_ads[i].line1+'</strong><br />';
s += google_ads[i].line2+ '<br />' + google_ads[i].line3+'<br />';
s += '<small>' + google_ads[i].visible_url + '</small></pre></div>';
}
document.write(s);
return;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</body>
</html>
I want also use this type of code on my site.
Please tell me is legal or illegal for Google adsense policy.
you can't use this code because it is for premium publisher only
https://www.google.com/adsense/premium-login

Create HTML table with hyperlink from JSON Object

I have an application which returns a JSONObject. I am able to get data from JSON object using below code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
<style type="text/css">
table, td, th
{
border:1px collapse black;
font-family:Arial;
font-size :small;
}
th
{
background-color:green;
color:white;
}
.hideMe
{
/*display : none;*/
/*visibility: hidden;*/
}
</style>
<script type="text/javascript" language="jscript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
var host = "somehost";
var mystr = "http://"+ host +"/rest/bpm/wle/v1/exposed/process"; // use get for this
var ulink = "";
$(document).ready(function () {
$.get(mystr, function (data) {
var obj = JSON.parse(data);
var thtml = "<table id='proctable'>";
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function()' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
}
thtml = thtml + "</table>";
document.getElementById('contentdiv').innerHTML = thtml;
});
});
//javascript
my_function = null;
//jquery
$(function () {
function generateBPDInstance() {
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}
my_function = generateBPDInstance;
ulink = "";
})
`
</script>
</head>
<body>
<form name="myform">
<div id="contentdiv">
<table id="proctable">
</table>
</div>
</form>
</body>
</html>
The above html creates a table showing a list of the returned values. I also want to get rowIndex of hyperlink and pass value of column2 to function generateBPDInstance.
I am not so good at HTML and Jquery. Please suggest how can I get rowIndex for HTML table which is created through javascript.
Thanks in advance.
The simple way is :
change your table building to this
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "" + obj.data.exposedItemsList[i].display + "" + ulink + "";
function my_function(e){
//e is the row index and when you call document.getLementById("proctable").rows[e]; this will give you the complete row.
}
--this is a simple way, and if you want traverse the tree and get , you always have parentnode or you can use jquery $(object).parent() to get the parent of hyperlink and traverse.
You problem is "pass value of column2 to function generateBPDInstance". Why not pass it already while generating the table?
for (i = 0; i < obj.data.exposedItemsList.length; i++) {
ulink = "http://" + host + obj.data.exposedItemsList[i].startURL;
thtml = thtml + "<tr><td><a onclick='my_function('" + ulink + "')' href='javascript:void(0)'>" + obj.data.exposedItemsList[i].display + "</a></td><td id='linkcell' class='hideMe'>" + ulink + "</td></tr>";
// ------------------------------------------------------^ pass the value
}
Add parameter to your function generateBPDInstance
function generateBPDInstance(ulink) {
//--------------------------^----
$.post(ulink, function (taskdata) {
var tobj = JSON.parse(taskdata);
alert(tobj.data.tasks[0].name);
alert(tobj.data.tasks[0].tkiid);
});
}

Categories