I want to do display time-changing data on a web page. I use the JQuery framework. I use the following code as a test : display a different random number each second. It does not work. Why ? What is a correct, working way ?
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function refreshRandomNumber() {
var lHtmlBlob = "<p> random = " + Math.random() + "</p>";
$('#random_number').html(lHtmlBlob);
}
setInterval(refreshRandomNumber(), 1000);
});
</script>
</head>
<body>
<div id="random_number"></div>
</body>
</html>
You need to pass setInterval just the function referenced by refreshRandomNumber and not the return value of that function what you do by using refreshRandomNumber(). So try this:
setInterval(refreshRandomNumber, 1000);
Small difference. instead of:
setInterval(refreshRandomNumber(), 1000);
use:
setInterval(refreshRandomNumber, 1000);
That passes the function rather than the function return value.
Related
I'm using an API, and am trying to access the value of product.shoeName to change text on my HTML page. This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="shoepoo.js">
</script>
</head>
<body>
<div>
<p id="text" style="color:purple;
font-weight:bold;font-size:20px;">
</p>
<script type="text/javascript"> shoeName(); </script>
</div>
</body>
</html>
const SneaksAPI = require('sneaks-api');
const sneaks = new SneaksAPI();
//getProducts(keyword, limit, callback) takes in a keyword and limit and returns a product array
function shoeName(){
sneaks.getProducts("Jumbo Blazer", 1, function(err, products){
products.forEach(
function names (product) {
document.getElementById("text").innerHTML = product.shoeName;
})
});
};
Basically, I want product.shoeName to be shown as text, but nothing is showing up. How can I fix this? I understand it's a local function which is probably stopping the data from being shown (or something like that), but how can I work around this?
Made below changes in shoepoo.js
products.forEach((product)=> {
document.getElementById("text").innerHTML = product.shoeName;
});
But you need to create dynamic HTML components if there is multiple data in products. Otherwise, it set the last shoeName in the paragraph component.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#p1").load("reporting/data.geojson").toString();
var str = document.getElementById("p1").innerHTML;
document.getElementById("p2").innerHTML = str;
});
</script>
</head>
<body>
<div id="div1">
<h2>try</h2>
</div>
<p id="p1"></p>
<p id="p2"></p>
</body>
</html>
this is the code, p1 clearly shows on the screen but my actual problem is that i cant fill the string with it, "maybe the load function is the last to act i dont know" kinda new on this. I need to put the .geojson text in a string, or any other way to extract the coordinates would save me the trouble of string eddting. thank you iij advance
You need to use the callback of load to get the data from #p1.
The load method is asynchronous, so the code does not wait for the data to load and executes the next statement.
$(document).ready(function() {
$("#p1").load("reporting/data.geojson", function() {
var str = document.getElementById("p1").innerHTML;
document.getElementById("p2").innerHTML = str;
});
});
As you're using jQuery, you can use html()
$(document).ready(function () {
$("#p1").load("reporting/data.geojson", function () {
$('#p2').html($('#p1').html());
});
});
Hi I am trying to call the namespace JavaScript which is given in the internal JavaScript in below HTML representation.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function() {
ns.message(var );
}
message :function(var ) {
alert('msg');
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
</body>
Is that possible? I am not able to call that namespace JavaScript function in the body.
Call it like this:
ns.sampleAlert();
Read this link to have more understanding on JavaScript Namespace
You probably need to do something like the following.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function(messageText) {
ns.message(messageText);
},
message : function(text) {
alert('msg ' + text);
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
<script type="text/javascript">
ns.sampleAlert("this text will be displayed in the alert");
</script>
</body>
I did something like this
<head>
<script src="trans.js" type="text/javascript"></script>
<title><script>trans("Configuration: Status - Software")</script></title>
</head>
However the web title looks like
trans("Configuration: Status - Software")
Why is the js not working here,What should modify to make it work?
Here's what tran.js look like
function trans(key)
{
document.write(getkey(key));
}
function getkey(key)
{
var text;
text = lang_pack[key];
if (text == undefined || text == "")
{
text = key;
}
return(text);
}
I'm not sure you can use a script inside of a title tag -- can you move it into a different block?
It's unclear exactly what trans.js is, but you can try:
<script>
document.title = trans('Configuration: Status -Software');
</script>
You should try setting the title in javascript like
document.title = trans('Configuration: Status - Software');
var temp = document.getElementsByTagName("title").innerHTML;
temp[0].innerHTML = "your new title";
Try including the src in the same script tag as the function call:
<head>
<script src="trans.js" type="text/javascript">trans("Configuration: Status - Software")</script></title>
</head>
Try this:
<head>
<script src="trans.js" type="text/javascript"></script>
<title></title>
<script>document.title = getkey("Configuration: Status - Software")</script>
</head>
You mean this?
<head>
<title>This is Test 1st</title>
<script>
var field = "This is Test 2nd";
$("title").append(field);
</script>
</head>
you need is a jquery library.
I am trying to set the attribute of the script tag for a infomous word cloud as follows:
<head>
function getParameterByName(name)
{
...
}
</head>
<body>
<script type="text/javascript"
async data-infomous-id="javascript:getParameterByName('wcid');"
id="embed"
src="http://www.infomous.com/client2/?width=800&height=600&maxWords=40">
</script>
</body>
But the javascript function is never executed. How can I set the data-infomous-id dynamically?
This should do this trick:
jsFiddle
var elem = document.getElementById('embed');
elem.setAttribute('data-infomous-id', getParameterByName('wcid'));