I wanted to clear the value of text inside the input on the click of a button:-
Here is my code:
'''
<head>
<script>
function myfunction1() { //remember code var
texttosave = document.getElementById('textline').value;
localStorage.setItem('mynumber', texttosave);
document.getElementById('remember').value = ''
}
function myfunction2() { //recall code
document.getElementById('recalledtext').innerHTML =
localStorage.getItem('mynumber');
}
</script>
</head>
<body>
<input type="text" id="textline" />
<button id="remember" onclick='myfunction1()'>remember text</button>
<button id="recaller" onclick='myfunction2()'>recall text </button>
<p id="recalledtext">Loading</p>
</body>
</html>'''
I have did the correct thing, I think but please help as it is not working.
You need to put the value into a variable:
function myfunction2() { //recall code
// ...
var my_number = localStorage.getItem('mynumber');
}
Looks like the problem is that you dont do anything with the data you read from local storage.
A quick fix below.
function myfunction2() { //recall code
document.getElementById('recalledtext').innerHTML =
document.getElementById('remember').value = localStorage.getItem('mynumber')
}
Related
I am trying to print something inside my html from a javascript. I don't know javascript much. I did this but it don't work:
<script type='text/javascript'>
//<![CDATA[
function title() {
var t = document.title;
document.write(t);
}
//]]>
</script>
<div>
<span><script>title();</script></span>
</div>
You can use element.innerHTML
let name = document.getElementById("name");
name.innerHTML = "hello world";
<div itemprop='review' itemscope='' itemtype='https://schema.org/Review'>
<div itemprop='itemReviewed' itemscope='' itemtype='https://schema.org/Product'>
<span itemprop='name' id="name" />
</div>
</div>
If you fix your syntax error, and take away the CDATA you have a working bit of code. The reason why you still won't see any output is that, because you don't have a proper HTML document structure, there's no title to print...
Here's some updated code and an example of how to go about debugging using console.log().
<script type='text/javascript'>
function title() {
var t = document.title;
// print the value of t to the console to test
console.log( 'title is: ' + t );
document.write(t);
}
</script>
<div>
<span>
<script>title();</script>
</span>
</div>
You can define an external JavaScript file and link it to your html page like this.
<button onclick="myFunction()">Click me!</button>
<script src="app.js"></script>
and then define your function into app.js, like this:
function myFunction() {
document.write("Hello, I'm here!");
}
Lets say I have an HTML page which has its own function myFunction()
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
alert("stack overflow");
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
I want to change the myFunction()definition like this
function myFunction() {
//alert("stack overflow");
document.getElementById("demo").innerHTML = "Hello World";
}
using bookmarklet.So is there any way to change the def temporarily ?
I tried using the Chrome Console to change its def and also remain successful,but I want to change it using bookmarklets.So please help me.
As it's a global, you can do this in your bookmarklet:
var oldFunction = myFunction;
myFunction = function() {
alert("Hello world!");
};
Or if you enclose your bookmarklet in a scping function (usually a good idea), probably store the old value on a window property instead of a local var (so you can access it from another bookmarklet to restore it later):
window.oldFunction = myFunction;
myFunction = function() {
alert("Hello world!");
};
Another bookmarklet could set it back again:
myFunction = window.oldFunction; // or just = oldFunction if using a local var
Live Example:
function myFunction() {
alert("Original function");
}
document.getElementById("btn-override").addEventListener("click", function() {
window.oldFunction = myFunction;
myFunction = function() {
alert("New function");
};
}, false);
document.getElementById("btn-restore").addEventListener("click", function() {
myFunction = window.oldFunction;
}, false);
<input type="button" id="btn-call" value="Click to call myFunction" onclick="myFunction()">
<input type="button" id="btn-override" value="Click to override it">
<input type="button" id="btn-restore" value="Click to restore it">
Try this :
javascript: myFunction = function(){console.log('c')}
This question already has an answer here:
dynamically changing HTML tag
(1 answer)
Closed 9 years ago.
I want to display the text from a string into an HTML tag without moving to next page and display it.
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
document.write(str);
}
</script>
</div>
</body>
How do I edit the contents of the label tag?
Common …
document.getElementById('lbl1').innerHTML = str;
function display() {
var str="Hello World";
var label = document.getElementById('lbl1');
label.innerHTML = str;
}
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerText = str;
}
</script>
</div>
</body>
When you click the button, the function display() is run, and the label tag's text is changed to "Hello World".
Use document.getElementById("lbl1").innerHTML = display(); and add a return statement inside the function:
function display()
{
var str="Hello World";
return str;
}
You edit the contents in a similar manner: document.getElementById("lbl1").innerHTML = "New content...";.
You could also modify your display() function a little bit to get the desired result:
function display()
{
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerHTML = str;
}
Another way:
window.onload = function()
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
The last way is the most desired and it's the best to put JavaScript code inside another file and attach it via the src attribute of the script element.
Let's provide a complete example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<label id="lbl1">Label </label>
<button id="btn1">Click </button>
</body>
</html>
Then inside the JavaScript file you just register various events:
//JavaScript
window.onload = function() //You have to ensure that everything has loaded
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
It's generally considered the best way to register events in a separate JavaScript file because of performance and maintenance simplicity gains. You can read more about it here.
I can't figure out how to assign this function's result into a global variable. I know this is a really basic thing, but can anyone help?
var pixel_code = null
function captureValue(){
pixel_code = document.getElementById("baseText").value;
return pixel_code;
}
pixel_code = captureValue();
Thanks for sharing the jsfiddle of what you were attempting. I see the concern. The captureValue() function is run asynchronously, so the console.log() shortly after defining it doesn't yet have a value. I've stripped and prodded the jsfiddle and come up with this working sample:
<html>
<head>
</head>
<body>
<h1>Welcome to the AdRoll SandBox</h1>
<textarea id="baseText" style="width:400px;height:200px"></textarea><br />
<input type="button" value="test" id="text_box_button" onclick="captureValue()"/>
<input type="button" value="get" id="text_box_button2" onclick="getValue()"/>
<script>
var pixel_code = null;
function captureValue(){
pixel_code = document.getElementById("baseText").value;
return false;
}
function getValue() {
alert(pixel_code);
return false;
}
</script>
</body>
</html>
I added a second button. Type in the textbox, push "test" (to set the value), then push "get" to get the value of the global variable.
Here's the same sample that uses jQuery and a closure to avoid the global variable:
<html>
<head>
</head>
<body>
<h1>Welcome to the AdRoll SandBox</h1>
<textarea id="baseText" style="width:400px;height:200px"></textarea><br />
<input type="button" value="test" id="text_box_button" />
<input type="button" value="get" id="text_box_button2" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var pixel_code = null;
$("#text_box_button").click(function (){
pixel_code = document.getElementById("baseText").value;
return false;
});
$("#text_box_button2").click(function () {
alert(pixel_code);
return false;
});
});
</script>
</body>
</html>
If the page reloads, your variable will be reset to it's initial state.
You're reusing pixel_code in and out of the function, which is not a great pattern, but the code you show should work as expected. What error are you seeing? What code surrounds this code that you're not showing? Could all this perhaps be nested inside another function? (Thanks #JosephSilver for the nod.)
Please try this,
var pixel_code='';
function captureValue(){
return document.getElementById("baseText").value;
}
function getValueBack()
{
pixel_code = captureValue();
//alert(pixel_code); /* <----- uncomment to test -----<< */
}
I am facing a problem with JavaScript objects. I have some text on a page which should converts into textfield when clicked. The problem is that when I click the text the console displays the error message
"textNode not defined or null and tn is not defined".
Please help, I want to solve this problem in a way so that I don't have to move the JavaScript code to any other location from head tag.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
function preload()
{
if(!tn) var tn=new Object();
tn.variables=
{
textboxNode: document.getElementById('textbox'),
textNode: document.getElementById('text'),
textValue: textNode.firstChild.nodeValue,
doneButton: document.getElementById('done')
};
}
function change()
{
tn.variables.textboxNode.setAttribute('value', textValue);
tn.variables.textNode.style.display = 'none';
tn.variables.textboxNode.setAttribute('type','text');
tn.variables.doneButton.setAttribute('type','button');
}
function changeBack()
{
tn.variables.textNode.firstChild.nodeValue = textboxNode.value;
tn.variables.textNode.style.display = 'block';
tn.variables.textboxNode.setAttribute('type', 'hidden');
tn.variables.doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body onload= "preload()">
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
Thanks in advance.
The object tn is local to the preload function.
Define it as global variable instead:
var tn = new Object();
function preload()
{
tn.variables=
{
//....
}
}
Also, you can't get other property value when you just define the object.
Change textValue to be a function instead:
tn.variables =
{
textboxNode: document.getElementById('textbox'),
textNode: document.getElementById('text'),
textValue: function() {
return this.textNode.firstChild.nodeValue;
},
doneButton: document.getElementById('done')
};
Then invoke it as function as well, for example:
tn.variables.textboxNode.setAttribute('value', tn.variables.textValue());
i think your tn variable is not correctly set in a global scope. Try to modify the top of your javascript like this:
<script type="text/javascript" language="javascript">
var tn = null;
function preload()
{
if(!tn)
{
tn=new Object();
}
tn.variables=
{
textboxNode: document.getElementById('textbox'),
textNode: document.getElementById('text'),
textValue: textNode.firstChild.nodeValue,
doneButton: document.getElementById('done')
};
}
to begin with, define tn globally - outside the scope of preload