I have this JS code, in which i would like to call x var and set value. But it is not working: When the function returns the value of x, the result is undefined:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
var myvar={
FirstL:function(){
var x='hello world';
}
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="document.write(myvar.FirstL().x);" >
</body>
</html>
var x is a private variable and you cannot use it outside the function scope, you may just return the x and call your method:
var myvar={
FirstL:function(){
var x='hello world';
return x;
}
}
In html attribute:
onclick="document.write(myvar.FirstL());"//FirstL() returns the 'x'
Suggestion:
Don't use document.write() you may google for its alternative.
Related
I am trying to get "src" value of the image tag and displaying in an alert box.
Alert box message says: "undefined." It works if the script is contained in one block. But fetching a value from outside a script block from another or from an external JavaScript file, loses the saved value.
<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
<script type="text/javascript">
var y = document.getElementById('content');
var z = y.src;
</script>
</head>
<body>
<img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
<script>
alert(z); // undefined?
</script>
</body>
</html>
Because when this line var y = document.getElementById('content'); executed, the element img is not ready, therefore y is null and y.src is undefined, if you change to var z = "test", then you could see that alert show correct :
<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
<script type="text/javascript">
//var y = document.getElementById('content');
var z = "test";
</script>
</head>
<body>
<img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
<script>
alert(z); // undefined?
</script>
</body>
</html>
So, how to fix it ? you could put the line var y = document.getElementById('content'); in the script block after the img element is declared:
<!DOCTYPE html>
<html>
<head>
<title>Test src</title>
</head>
<body>
<img id="content" src="https://cdn.pixabay.com/photo/2017/10/17/19/04/adorable-2861801_960_720.png">
<script>
var y = document.getElementById('content');
var z = y.src;
</script>
</body>
<script>
var y = document.getElementById('content');
var z = y.src;
alert(z); // undefined?
</script>
</html>
The result of the following code is only 🧜🏽♂️ 🏾🏿🛀🛌🏻🏼🧑🤝👭👩👫👨👬, where I want to find all the unique graphic represationations shown in the Firefox output that I copied to the var a originally. (Basically the code should show the original a string as output.)
How to do that?
<html>
<head>
<meta charset="UTF-8" />
<script>
var a = '🧜🏽♂️ 🧜🏾♂️ 🧜🏿♂️ 🧜🛀🏿 🛌🏻 🛌🏼 🛌🏽 🛌🏾 🛌🏿 🧑🏻🤝🧑🏻 🧑🏻🤝🧑🏼 🧑🏻🤝🧑🏽 🧑🏻🤝🧑🏾 🧑🏻🤝🧑🏿 🧑🏼🤝🧑🏻 🧑🏼🤝🧑🏼 🧑🏼🤝🧑🏽 🧑🏼🤝🧑🏾 🧑🏼🤝🧑🏿 🧑🏽🤝🧑🏻 🧑🏽🤝🧑🏼 🧑🏽🤝🧑🏽 🧑🏽🤝🧑🏾 🧑🏽🤝🧑🏿 🧑🏾🤝🧑🏻 🧑🏾🤝🧑🏼 🧑🏾🤝🧑🏽 🧑🏾🤝🧑🏾 🧑🏾🤝🧑🏿 🧑🏿🤝🧑🏻 🧑🏿🤝🧑🏼 🧑🏿🤝🧑🏽 🧑🏿🤝🧑🏾 🧑🏿🤝🧑🏿 👭🏻 👩🏻🤝👩🏼 👩🏻🤝👩🏽 👩🏻🤝👩🏾 👩🏻🤝👩🏿 👩🏼🤝👩🏻 👭🏼 👩🏼🤝👩🏽 👩🏼🤝👩🏾 👩🏼🤝👩🏿 👩🏽🤝👩🏻 👩🏽🤝👩🏼 👭🏽 👩🏽🤝👩🏾 👩🏽🤝👩🏿 👩🏾🤝👩🏻 👩🏾🤝👩🏼 👩🏾🤝👩🏽 👭🏾 👩🏾🤝👩🏿 👩🏿🤝👩🏻 👩🏿🤝👩🏼 👩🏿🤝👩🏽 👩🏿🤝👩🏾 👭🏿 👫🏻 👩🏻🤝👨🏼 👩🏻🤝👨🏽 👩🏻🤝👨🏾 👩🏻🤝👨🏿 👩🏼🤝👨🏻 👫🏼 👩🏼🤝👨🏽 👩🏼🤝👨🏾 👩🏼🤝👨🏿 👩🏽🤝👨🏻 👩🏽🤝👨🏼 👫🏽 👩🏽🤝👨🏾 👩🏽🤝👨🏿 👩🏾🤝👨🏻 👩🏾🤝👨🏼 👩🏾🤝👨🏽 👫🏾 👩🏾🤝👨🏿 👩🏿🤝👨🏻 👩🏿🤝👨🏼 👩🏿🤝👨🏽 👩🏿🤝👨🏾 👫🏿 👬🏻 👨🏻🤝👨🏼 👨🏻🤝👨🏽 👨🏻🤝👨🏾 👨🏻🤝👨🏿 👨🏼🤝👨🏻 👬🏼 👨🏼🤝👨🏽 👨🏼🤝👨🏾 👨🏼🤝👨🏿 👨🏽🤝👨🏻 👨🏽🤝👨🏼 👬🏽 👨🏽🤝👨🏾 👨🏽🤝👨🏿 👨🏾🤝👨🏻 👨🏾🤝👨🏼 👨🏾🤝👨🏽 👬🏾 👨🏾🤝👨🏿 👨🏿🤝👨🏻 👨🏿🤝👨🏼 👨🏿🤝👨🏽 👨🏿🤝👨🏾 👬🏿 🏻 🏼 🏽 🏾 🏿 ';
var b = [...new Set([...a])];
var c = b.join('');
function init() { document.getElementById('result').innerHTML = c; }
</script>
</head><body onload="init()">
<span id="result"></span>
</body>
</html>
<html>
<head>
</head>
<body>
<p id="demo"></p>
<html>
<head>
</head>
<body>
<p id="demo"></p>
<script src="jquery.js" ></script>
<script>
function generateTerms()
{
return Math.floor(Math.random()*1000)+1;
document.getElementById("demo").innerHTML = generateTerms;
}
setInterval(generateTerms,1000);
</script>
</body>
</html>
my code is not running...not generating numbers
You are using return before the setting innerHTML. return stops the further execution of the function. You need to assign it to a random value.
Note: If you want to get the value returned by a function in other function then you should use () to call the function.(Here it won't work)
<html>
<head>
</head>
<body>
<p id="demo"></p>
<script src="jquery.js" ></script>
<script>
function generateTerms()
{
let random = Math.floor(Math.random()*1000)+1;
document.getElementById("demo").innerHTML = random;
}
setInterval(generateTerms,1000);
</script>
</body>
</html>
return leaves the scope of the function and returns a value. The code below it won't be executed. Plus, document.getElementById("demo").innerHTML = generateTerms; is a non sense, there is no variable named generateTerms
Change your function to this :
function generateTerms()
{
var randomNumber = Math.floor(Math.random()*1000)+1;
document.getElementById("demo").innerHTML = randomNumber;
}
function generateTerms()
{
var randomNumber = Math.floor(Math.random()*1000)+1;
document.getElementById("demo").innerHTML = randomNumber;
}
setInterval(generateTerms,1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo"></p>
This is works fine when i am using addEventListener. But, it is not working when i use button.click . what is the mistake on the below code? what is the cause it is not working on varNext.click= myFunc;?
[code]
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function myFunc(){
var var1 = document.getElementById("slideimage");
var var2 = var1.name.split("_");
//alert(var2);
index = var2[1];
if(index == images.length - 1){
index = 0;
}else {index++;}
var1.name = "image_" + index;
var1.src = images[index];
}
</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
var varNext = document.getElementById("nextbtn");
//varNext.addEventListener("click", myFunc, false);
varNext.click= myFunc;
</script>
</body>
</html>
[/code]
Rather than .clickfires the element's click event it must be .onclickproperty returns the onClick event handler
Try this
varNext.onclick = myFunc;
Demo Fiddle of your code
You need to use the onclick attribute
varNext.onclick = myFunc;
I am new to Json. please tell me how to access following element. this is my Json
var data = {"student":[{"fname":"mad", "sname":"cha"}, {"fname":"sun", "sname":"ban"}, {"fname":"sha", "sname":"kiri"}]};
so how I access to the "mad"value.
actually this is what I trying to do
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function click_me(){
var data = {"student":[{"fname":"mad", "sname":"cha"}, {"fname":"sun", "sname":"ban"}, {"fname":"sha", "sname":"kiri"}]};
localStorage.setItem('my_name',data);
alert('OK');
}
function show_me(){
var x = localStorage.getItem('my_name');
x = x.student[0].fname;
alert(x);
}
</script>
</head>
<body>
<input type="button" name="btn" value="Click" onclick="click_me()">
<input type="button" name="btn" value="show_me" onclick="show_me()">
</body>
</html>
It's
var yourValue = data.student[0].fname
By the way, this isn't JSON but a plain javascript object. JSON is a string based interchange format.
EDIT following your edit.
localStorage only stores strings. That's why getItem gives you a string in which you can't find your "mad".
Here's what you can do :
function click_me(){
var data = {"student":[{"fname":"mad", "sname":"cha"}, {"fname":"sun", "sname":"ban"}, {"fname":"sha", "sname":"kiri"}]};
localStorage.setItem('my_name', JSON.stringify(data));
alert('OK');
}
function show_me(){
var x = JSON.parse(localStorage.getItem('my_name')||"{}");
x = x.student[0].fname; // it would be cleaner to test x.student exists
alert(x);
}
Access the value as follows:
var firstName = data.student[0].fname;
Example: http://jsfiddle.net/N8bSk/
you can do this by
var yourValue = data.student[0].fname