as the title said and i'm learning javascript and still a beginner.
This the Html file here :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementsByClassName("menu").innerText = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>
Since you are running Jquery you can use Jquery method. like text() or html()
But your problem, is that document.getElementsByClassName("menu") return an HTML Collection so you have to do : document.getElementsByClassName("menu")[0].innerHTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 class="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
$(".menu").text(clr({a:"a", b:"b", c:"c"}));
</script>
</body>
</html>
document.getElementsByClassName("menu") will return an Array-like NodeList of elements that contain the class menu.
Since its an Array-like object, you need to access individual elements using [].
In your case, it will be a an array of 1 element, the h1 element, so to access it you need to grab it at position 0:
document.getElementsByClassName("menu")[0].innerHTML = clr({a:"a", b:"b", c:"c"});
----------------------------------------^
I edited a couple a things. You were close.
I gave the h1 an id. And used document.getElementById.
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 id="menu"></h1>
<script type="text/javascript">
function clr(o){
var a1 = [];
var i = 0;
for (var k in o){
a1[i] = 0;
i++;
}
return a1;
}
console.log(clr({a:"a", b:"b", c:"c"}));
document.getElementById("menu").innerHTML = clr({a:"a", b:"b", c:"c"});
</script>
</body>
</html>
Related
Please help. I need my array to save when I goto another page. Since the page refreshes it loses the array. From here my code stops at the beginning of the store it function when I try to use sessionstorage.
Here is my attempt. The array part is just to remove the duplicate from and array and place it into array b.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Session Storage Attempt</title>
<script src="untitled-1.js" type="text/javascript"></script>
</head>
<body>
<button onClick="doIt()">Button</button>
<br>
<br>
<button onClick="storeIt()">Store It</button>
</body>
</html>
Javascript:
let a = [];
let b = [];
function doIt(){
a.push("a");
let len = a.length;
for(let i = 0; i < len; i++){
if(b.indexOf(a[i]) === -1){
b.push(a[i]);
}
}
alert(b);
}
function storeIt(){
sessionStorage.setItem('bee', JSON.stringify(b));
JSON.parse(sessionStorage.getItem('bee'));
alert(bee);
}
I have index.html file with code:
<DOCUMENT!>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js\script.js"></script>
<link rel="stylesheet" type="text/css" href="css\style.css"></link>
<title> mchy i porosty </title>
</head>
<body>
<p id="demo"></p>
</body>
</html>
In the same folder I have folder "js" with file script.js inside. The code inside this file is:
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = "text";
When I open file index.html in Firefox I see blank page.
When I put code from script.js into index.html using script markup and open index.html in Firefox I see list of cars.
Can someone explain me, what did I do wrong?
Looks like you have a syntax error in your javascript path (and your css).
<script type="text/javascript" src="js\script.js"></script>
<link rel="stylesheet" type="text/css" href="css\style.css"></link>
Should be:
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
You also need to load or fire your function. You can do this with a simple window.onload. What you currently have will only output "text" in your html, so remove the "" from "text" in your function.
window.onload = function(){
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
Alternatively, you can load your function in your body tags with <body onLoad="foo();"> and updating the function from window.onload = function() to function foo().
This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 8 years ago.
my code is working in jsfiddle but not working in the browser i dont know what i missed here could you please check it and tell me the solution. i google it but i am not getting correct solution please help me
this is jsfiddle link http://jsfiddle.net/pLTrJ/9/
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9,0);
function updateTheDiv(inRange, inMin) {
random = (Math.random()*inRange+inMin)|0;
theDiv.innerHTML = random;
var nextCall = (Math.random()*1000)|0;
setTimeout(function() {
updateTheDiv(inRange, inMin);
}, nextCall);
}
</script>
<body>
<div id="showVal"></div>
</body>
</html>
jsfiddle has wrapped it automatically in the onload event. You haven't done this in your HTML page, so when it runs in the browser you're trying to get hold of the div before it's been rendered, so theDiv is null.
The below should work:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
window.onload = function () {
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9, 0);
function updateTheDiv(inRange, inMin) {
random = (Math.random() * inRange + inMin) | 0;
theDiv.innerHTML = random;
var nextCall = (Math.random() * 1000) | 0;
setTimeout(function () {
updateTheDiv(inRange, inMin);
}, nextCall);
}
}
</script>
<body>
<div id="showVal">
</div>
</body>
</html>
Try this in your Browser ;)
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<body>
<div id="showVal"></div>
</body>
<script type="text/javascript">
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9,0);
function updateTheDiv(inRange, inMin) {
random = (Math.random()*inRange+inMin)|0;
theDiv.innerHTML = random;
var nextCall = (Math.random()*1000)|0;
setTimeout(function() {
updateTheDiv(inRange, inMin);
}, nextCall);
}
</script>
</html>
(I just put the script to the bottom. So the script loads after your element is set.)
I'm getting an error of "buildXML is not defined" when I run this code:
var c = {
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = buildSurveyXML(survey);
},
buildSurveyXML: function(survey) {
var surveyResults = survey.split("|");
var surveyXML = '';
for (var i=0;i<surveyResults.length;i++){
...
}
return surveyXML;
}
}
And the html that includes this JS and calls the updateConsumer function:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Web Service Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../shared/js/consumerSoap.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
c.insertConsumer("First","Last","55555","name#url.com","76:1139");
});
</script>
</body>
</html>
The problem is that updateConsumer doesn't know anything about buildSurveyXML; that function isn't in the global scope. However, since your function is part of the same object, you can call it using the this keyword.
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = this.buildSurveyXML(survey);
}
Use
var surveyXML = c.buildSurveyXML(survey);
I've written this sample code to print the length of x. But for some reason, I am not getting anything! Help!
<html>
<head>
<script type = "text/javascript">
function myF()
{
var x = [1,2,3,4];
var y = document.getElementById("thing");
y.innerHtml = x.length;
}
</script>
</head>
<body onload = "myF();" >
<div id = "thing" >
PRINT TEST
</div>
</body>
</html>
The property name is innerHTML rather than innerHtml.