How to make the output of multiple JavaScript functions display in HTML? - javascript

So I'm trying to display the results of a few function calls in a JavaScript file that uses benchmark.js in a separate HTML file.
My js file looks something like this (disregard the names of methods and classes):
class.init(function(context) {
Benchmark("function description", {
'defer': true,
fn': function(deferred) {
var x = context.ones([100, 100]);
var y = x.repeat(2, 0);
context.barrier(function (){
deferred.resolve();
});
},
'onComplete': function(event) {
//This is what I'd like to print out
console.log(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms");
//
}
}).run();
There are multiple function calls similar to this.
My HTML just looks something lile:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Sublime Webpage </title>
</head>
<body>
<div class="main">
<div class="head">
<h1>Hello</h1>
</div>
<script src="filename.js"></script>
</div>
</body>
</html>
At the moment, it just prints the results to the console, which is better than nothing, but obviously not what I want. I talked to someone briefly and they suggested I use jQuery. I looked into it, and tried using document.write(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms") in the place of console.log(), but this didn't seem to work. Does anyone have suggestions?

Use document.createTextNode:
// add an output div to your html
<div id='output'></div>
// in your benchmark code
var output = document.getElementById('output');
output.appendChild(document.createTextNode('some result'));
Fiddle

Related

I have an array containing different div IDs how do i target specific IDs from within the aray javascript/jquery

So I have an array in my script.js file. The array contains around 12 different things. I use the array to store divs IDs'. Because I want to load those divs dynamically. I've done that I loaded the divs dynamically but now I want to use that array for loading things inside the first div(a title a picture and so on).
let donorFeatureNames = [
'SpawnVehicle',
'RepairVehicle',
'RocketVoltic',
'MoreVehicle',
'ChatColors',
'Deagle',
'M4',
'Sniper',
'CopFeature',
'CrimFeature',
'Changeskin',
'Cash'
]
function loadFeatures () {
for (i = 0; i < 12; i++) {
$('#featureMenu').append('<div id=' + '"' + donorFeatureNames[i] + '"' + 'class="item notLoaded"></div>')
$("'#" + donorFeatureNames[i] + "'").append(span class="title">' + $(this).data('donorfeature') + '</span>)
}
I hope you understand what I'm asking. Cause I'm not that good at explaining things.
Instead of an array, just use jquery:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index1001</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//credit to https://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag
$(function () {
$("#test1").append("Text");
$('#test2').prepend("<img src='../../Images/w.JPG' />")
})
</script>
</head>
<body>
<div id="test1" class="anArray"></div>
<br/>
<div id="test2" class="anArray"></div>
</body>
</html>
You can even do this to make an array: $(".anArray").addClass("aColor");
Huangism answered my question.
$("'#" + donorFeatureNames[i] + "'") isn't correct, but this is: $("#" + donorFeatureNames[i])
That's basically what I asked.
Thanks a lot man!

Why is my output repeating?

I want to alert "running function cannons" then when I press ok I want it just to say "cannon ship sails off to 14 degrees" but it keeps printing the alert within my output.
JS
function alertMessage (message) {
alert (message);
}
alertMessage("the Battle has begun");
function alertShip (ship, number) {
alert (ship);
document.write (ship + "the ship sails off to " + number + "degrees");
}
alertShip("running function cannons", 14);
HTML
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Functions</title>
<!-- This links to the js code specific for this page -->
<script src="functions.js"></script>
</head>
<body>
<div id="output"> </div>
<div id="output2"> </div>
</body>
</html>
Try removing the ship parameter from the document.write and replacing the statement with this:
document.write("cannon ship sails off to " + number + " degrees");
Then, you should be able to get your desired output.
*p.s.: if you're doing this on a text editor and trying to run this on a browser, you can consider changing the tag to this: .
I hope this helps!
don't give them the same variable to output .. alert (ship) then document.write (ship+.....).
Try this instead
function alertShip (ship, number) {
alert (ship);
document.write ("Cannon ship sails off to " + number + "degrees");

Get the image from Google Feeds API

I know this is likely very easy however I have been bashing my head for little over an hour and I am stuck.
I am trying to use Google Feed API to show a list of recent houses, It works just fine until it comes to pulling the image. I am struggling to get it to pull the image. I am sure there is a way because the slideshow script that google released can get the images...
Here's my code taken from a basic example I am absolutely clueless as to where to go to even try and figure out how to retrieve the image.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Feed Loader Example #1</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=#"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(showFeed);
function showFeed() {
var feed = new google.feeds.Feed("http://www.trulia.com/rss2/San_Francisco,CA/3p_baths/3p_beds/800000-2000000_price/date;d_sort/");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var bmfx = result.feed.entries[i].mediaGroups[0].contents[0].url;
var li = document.createElement("li");
li.innerHTML = '<h3>' + entry.title + ' <cite>by ' + entry.mediaGroup + '</cite></h3>';
li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(li);
}
} else {
var container = document.getElementById("headlines");
container.innerHTML = '<li>Ooops It Failed';
}
});
}
</script>
</head>
<body>
<h1>Google Feed Loader Example</h1>
<ul id="headlines"></ul>
</body>
</html>
According to your case, you should use:
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;

Javascript array variables not behave equally

Javascript code reads XML local file into array variable arrTst. It works in Firefox 25.0.1 and I can see arrTst values in debugger. I have problems working with this arrTst. Example is displaying alert.
If I swap alert lines (displaying arrTest first) then alerts are not displayed.
Can anyone explain why alerts are not displayed when lines are swapped ?
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<inData>
<record>
<date>2012-08-01</date>
<amount>7</amount>
</record>
<record>
<date>2012-08-02</date>
<amount>22</amount>
</record>
</inData>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<script type="text/javascript" src="jquery-1.10.2.js"> </script>
<title>test read XML file</title>
</head>
<body>
<h1 >Test XML</h1>
<div id="TstMsgArea"></div>
<script type="text/javascript">
var str1="";
var arrTst=[];
var arrCon=[["2013-08-01", 1], ["2013-08-02",33]];
$(document).ready(function(){
/*******************************************************************
* read xml file from local filesystem & push to array
*******************************************************************/
$.get("test.xml",{},function(xml){
$('record',xml).each(function(i) {
_date = $(this).find("date").text();
_amount = parseInt($(this).find("amount").text());
var X0=[];
X0.push(_date);
X0.push(_amount);
arrTst.push(X0);
alert (str1);
str1+=_date +", "+_amount+"; ";
$("#TstMsgArea").append(str1);
});
});
/*******************************************************************
* check array values - if lines swapped no go !
*******************************************************************/
alert ("arrConst : " + arrCon[0][0]+", " + arrCon[0][1]+"; " + arrCon[1][0]+", " + arrCon[1][1]);
alert ("arrTest : " + arrTst[0][0]+", " + arrTst[0][1]+"; " + arrTst[1][0]+", " + arrTst[1][1]);
}); //$(document).ready
</script>
</body>
</html>
Your alerts are in the wrong place. You need to put them inside your success function, or in another function that you call from within that function.
Also, you shouldn't declaring str1 and arrTst outside the success function. Those are values you are building up inside that function, and they won't be available outside of it.
If you want to use those variables somewhere else in your code, you need to put the code that uses them inside a function somewhere. Call that function from inside your $.get() success function, and pass it the variables as an argument. Then you can be sure that the data is ready.
var arrCon=[["2013-08-01", 1], ["2013-08-02",33]];
$(document).ready(function(){
/*******************************************************************
* read xml file from local filesystem & push to array
*******************************************************************/
$.get("test.xml",{},function(xml){
var str1="";
var arrTst=[];
$('record',xml).each(function(i) {
_date = $(this).find("date").text();
_amount = parseInt($(this).find("amount").text());
var X0=[];
X0.push(_date);
X0.push(_amount);
arrTst.push(X0);
alert (str1);
str1+=_date +", "+_amount+"; ";
$("#TstMsgArea").append(str1);
});
alert ("arrConst : " + arrCon[0][0]+", " + arrCon[0][1]+"; " + arrCon[1][0]+", " + arrCon[1][1]);
alert ("arrTest : " + arrTst[0][0]+", " + arrTst[0][1]+"; " + arrTst[1][0]+", " + arrTst[1][1]);
});
}); //$(document).ready

Reading <input> values from an iframe and sending it to another as HTML

How should I read values from iframe1 and send it to iframe2 as HTML? Either JavaScript or jQuery is acceptable - it does not matter. I'm new to javascript. I already found code like the one below, maybe this will help.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getIframeText() {
var iframe0 = document.getElementById("iframe0");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("frame_text");
alert(inputIframe.value);
}
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe0" src="test.html" >
<input type=text id="parent_text">
</div>
</body>
</html>
Take a look to this: http://jsfiddle.net/nick_craver/c5JeU/2/
$('button').click(function(){
var fjq = $('#frame')[0].contentWindow.$;
var f = $('#frame').contents().find('#data');
f.append( '----------<br>');
f.append( 'test1: ' + fjq.data(f[0], 'test1') + '<br>test2: ' + fjq.data(f[0], 'test2') + '<br>' );
f.append( 'test3: ' + typeof (fjq.data(f[0], 'test3')) + '<br>' );
})
I found it on: Access jQuery data from iframe element

Categories