Javascript - Displaying browser details in new document - javascript

I am trying to create a button that will display browser details in a new document using javascript. I have searched here and w3schools and am quite stumped! I am really new to javascript so any advice is greatly appreciated. Thanks!
<html>
<head>
<script type="text/javascript">
function docOpen()
{
document.open();
document.write(browserDetails);
}
function browserDetails () {
var x = navigator
document.write("CodeName=" + x.appCodeName)
document.write("<br />")
document.write("MinorVersion=" + x.appMinorVersion)
document.write("<br />")
document.write("Name=" + x.appName)
document.write("<br />")
document.write("Version=" + x.appVersion)
document.write("<br />")
document.write("CookieEnabled=" + x.cookieEnabled)
document.write("<br />")
document.write("CPUClass=" + x.cpuClass)
document.write("<br />")
document.write("OnLine=" + x.onLine)
document.write("<br />")
document.write("Platform=" + x.platform)
document.write("<br />")
document.write("UA=" + x.userAgent)
document.write("<br />")
document.write("BrowserLanguage=" + x.browserLanguage)
document.write("<br />")
document.write("SystemLanguage=" + x.systemLanguage)
document.write("<br />")
document.write("UserLanguage=” + x.userLanguage)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="docOpen()" value="Get Browser Details">
</form>
</body>

You have a curly double quote in place of a normal (straight) double quote here:
document.write("UserLanguage=” + x.userLanguage)
^
This is causing a syntax error. Replace it with a straight quote.

The problem is that you aren't invoking either of the functions you've defined. The call to browserDetails isn't a call, it's just a reference, and nothing is invoking the docOpen function.
Change line 4 to document.write(browserDetails());
Then invoke docOpen docOpen()
You'll also need to fix the smart quote as instructed by duskwuff.
I made a working fiddle at: https://jsfiddle.net/87q1a0kn/

You can do something like
<html>
<head>
<script>
function docOpen()
{
document.open();
document.write(browserDetails()); // ADD '()' to call the function
}
function browserDetails () {
var x = navigator;
// iterate through all properties and get the values
for(var prop in x) {
document.write(prop+' = '+ x[prop]+'<br />');
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="docOpen()" value="Get Browser Details">
</form>
</body>
EDIT based on #Barmar comment
<script>
function docOpen()
{
document.open();
browserDetails(); // ADD '()' to call the function --
}
function browserDetails () {
var x = navigator;
// iterate through all properties and get the values
for(var prop in x) {
document.write(prop+' = '+ x[prop]+'<br />');
}
}
</script>

Related

Why is the text element not being changed when I try with a function

<html>
<head>
<title>functionTesting</title>
</head>
<body>
<p id = "test" >test</p>
<script type = "text/javascript" >
function change(string){
//return string + ": Modified"
document:getElementById("test").innerHTML = string + ": Modified"
}
change("1234")
</script>
</body>
</html>
the test is never changed to "1234: Modified. It seems to stay as "test" unless I get the element outside the function then change it.
This line:
document:getElementById("test").innerHTML = string + ": Modified";
Should be:
document.getElementById("test").innerHTML = string + ": Modified";
You have a syntax error. Change:
document:getElementById
To:
document.getElementById
(colon to a period)

I am getting error running function in html

I have a function that I need to call from html. However, the way I have the call at the moment, it is causing typeError. Can someone show me how run this function: splitboxes(); in my html markup.
The function is declared earlier and works if I run just 'splitboxes', but need to call it as a function.
Thank you
$("html").append("<div id='dialog-success' />");
var dialogSuccess = $("#dialog-success");
dialogSuccess.html('<br />Here the details of your submitted intake ' +
'<br /><b><font color="green">' + depts + '</font></b><br />' + splitboxes(); +
' This entry was successfully submitted to the database.<br />Thank you.');
You have syntax error:
...+ splitboxes(); + ...
to
...+ splitboxes() + ...
Please use IDE to do your coding. It saves you aloooooot of headache :)
$("html").prepend("<div id='dialog-success' />");
var dialogSuccess = $("#dialog-success");
dialogSuccess.html('<br />Here the details of your submitted intake <br /><b><font color="green">depts</font></b><br />' + splitboxes()+' This entry was successfully submitted to the database.<br />Thank you.');
function splitboxes(){
return "<i>output from splitboxes() function</i>";
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
just remove ; from + splitboxes(); + here is the code and output

Why is my for loop not working in my JSON function?

Hey Guys im new at coding and working right now on a Twitch Viewer. (FreeCodeCamp)
Im able to get information from the JSON file and show it through my html code.
But my problem is that i cant get the names from my "gamer" array.
Why is the for loop not working in the json function?
Thank you very much for your help!
var gamer = ["OgamingSC2","ESL_SC2"];
for(i=0;i<(2);i++){
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[i]+'/?callback=?', function(json) {
$('.list').append("<b>Name: " + gamer[i] + "</b><br>");
var logo = json.stream.channel.logo;
$('.list').append("Game: " + json.stream.channel.game + "<br>");
$('.list').append("Status: " + json.stream.channel.status + "<br>");
$('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
console.log(json);
});}
img {
width: 5em;
border-radius: 10px;
}
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
<b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>
What happens here is the $.getJson is an asynchronous call, which means that it will execute only after all of the sync operations are executed. So, the for loop runs twice, and two getJSON callback functions are added to the function stack.
Now as Javascript has lexical or functional scope, the variable i lives on in the global scope as 2 (as the final i++ also has executed).
Next, the callback functions are executed one by one off of the function stack. But alas, your variable i is now 2! Now the callback functions would only see gamer[2] which doesn't exist and this throws an undefined
If you add a console.log(i) to your $.getJSON, you'll see that it outputs only 2 two times.
Why don't you try this:
var gamer = ["OgamingSC2","ESL_SC2"];
gamer.map(function(gamer) {
loopIt(gamer);
});
function loopIt(gamer) {
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer+'/?callback=?', function(json) {
$('.list').append("<b>Name: " + gamer + "</b><br>");
var logo = json.stream.channel.logo;
$('.list').append("Game: " + json.stream.channel.game + "<br>");
$('.list').append("Status: " + json.stream.channel.status + "<br>");
$('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
<b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>
i think it json gives nothing because you put callback=?
when you pass ? in call back variable it take value with ? and gives nothing.
so just put callback= .dont give any values and try again. and just alert json variable in function. you will know value is coming or not. i dont found nothing wrong with loop and json link.
For this types of server call in for loop , you can use custom loop.
Like this, https://jsfiddle.net/s8eLhxpx/
var gamer = ["OgamingSC2","ESL_SC2"];
var initCounter = 0;
callServerData()
function callServerData(){
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[ initCounter ]+'/?callback=?', function(json) {
$('.list').append("<b>Name: " + gamer[ initCounter ] + "</b><br>");
var logo = json.stream.channel.logo;
$('.list').append("Game: " + json.stream.channel.game + "<br>");
$('.list').append("Status: " + json.stream.channel.status + "<br>");
$('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
console.log(json);
initCounter++
if(initCounter < gamer.length){
callServerData();
}
});
}

Enumerating properties and values using forEach

Below code does not enumerate the properties & values of Array constructor on a web page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = myfunc;
function myfunc(){
window['Object']['getOwnPropertyNames'] (window['Array'])['forEach'](function(val){
document.write(val + ": " + Array[val] + "<br />" );
});
}
}
</script>
</head>
<body>
</body>
</html>
Is there any issue with the argument passed to forEach?
No the argument is fine, you have an extra } closing bracket.
window.onload = myfunc;
function myfunc(){
var x = "";
window['Object']['getOwnPropertyNames'] (window['Array'])['forEach'](function(val){
x += val + ": " + Array[val] + "<br />" ;
});
document.write(x);
}
I hope that you know document.write will replace the whole document. Moreover i have appended whatever you want to print in a variable x, you can use this x to display the output.
using Object.getOwnPropertyNames(Array); would be better
but if want to insist on you method then :
window['Object']['getOwnPropertyNames'] (window['Array'])['forEach'](function(val){
console.log(val);
});
you had an extra }
You have an extra closing curly brace in your code, which you can see easier when you fix the indentation of your code:
}
</script>
You can use window objects directly, there is no need for window['propertyName'].
window['Object']['getOwnPropertyNames'](...)
// is the same as
Object.getOwnPropertyNames(...)
You may want to use .forEach to call a method on returned results, not ['forEach']:
Object.getOwnPropertyNames(window).forEach(function (propName) {
console.log('In global window scope: ', propName);
});

Using Watir to click on Radio Buttons with variable values

I'm getting in trouble while trying to click on Radio Button.
The HTML code is:
function radioButtonFormatter(el, oRecord, oColumn, oData) {
var checkFalse='checkFalse';
var check='check' ;
el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";
}
I'd like to use something like:
browser.radio(:value => "oData").click
But it's not working...I also tried to use a piece of text as reference, but it didn't work as well.
Do you guys have any suggestion on how to perform it?
Thanks a lot!
But it's not working
Yes. When a page defines a js function like this:
function radioButtonFormatter(el, oRecord, oColumn, oData) {
var checkFalse='checkFalse';
var check='check' ;
el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";
}
...it does not cause the function to execute. If you executed this ruby program:
def greet
puts 'hello'
end
...would you wonder why there was no output? Similarly, the radio button doesn't exist until you execute the js function.
Next, this:
browser.radio(:value => "oData").click
looks for a radio button with the attribute:
<radio value="oData" ...>
What you want is:
browser.radio(:value => oData).click
However, that means you have to create a variable called oData, and assign it a value:
oData = "something here"
browser.radio(:value => oData).click
Writing the variable name oData in a ruby program does not magically make it have the same value as a variable called oData in a javascript program.
Here are some things you can do:
3.htm:
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<script type="text/javascript">
function disableButtons(x, y) {
document.getElementById("disable-info").innerHTML = x + " " + y;
}
function radioButtonFormatter(el, oData) {
var checkFalse='checkFalse';
var check='check' ;
el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";
}
</script>
</head>
<body>
<div>Hello world</div>
<div id="div1"></div>
<div id="disable-info"</div>
</body>
</html>
.
require 'watir-webdriver'
b = Watir::Browser.new :firefox
b.goto "http://localhost:8080/3.htm"
b.execute_script(
"radioButtonFormatter(
document.getElementById('div1'), 42
)"
)
b.radio(:value => "42").click
Or, if the radioButtonFormatter() function is triggered by some event, you can fire that event with watir-webdriver:
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<script type="text/javascript">
function disableButtons(x, y) {
document.getElementById("disable-info").innerHTML = x + " " + y;
}
function radioButtonFormatter(el, oData) {
var checkFalse='checkFalse';
var check='check' ;
el.innerHTML="<input type='radio' name='table-radiobutton' value='" + oData + "' onclick='disableButtons(this.checked, this.type)' />";
}
window.onload = function() {
document.getElementById('greeting').onclick = function() {
radioButtonFormatter(document.getElementById('div1'), 42);
}
}
</script>
</head>
<body>
<div id="greeting">Hello world</div>
<div id="div1"></div>
<div id="disable-info"</div>
</body>
</html>
.
require 'watir-webdriver'
b = Watir::Browser.new :firefox
b.goto "http://localhost:8080/3.htm"
b.div(id: "greeting").when_present.click #This causes radioButtonFormatter() to execute
b.radio(value: "42").when_present.click
But that does not let you control the value of oData. You would have to look at the js to figure out what value of oData gets set, and then use that value in your ruby script.
Try this:
el.innerHTML="<input id='rad' type='radio' name='table-radiobutton' value='val' />radio";
var rad = document.getElementById("rad");
rad.onclick=function(){
alert('clicked');
};
Demo: http://jsfiddle.net/TZTGT/

Categories