Develop Reference

How to add data from localStorage into an input box?

I am trying to pass data from an input field on one page to an input field on a second page.
Using localStorage I am able to get the data and then output it as an alert on the target page.
<script>
function setValue() {
var parseAmount = document.getElementById("amount").value;
localStorage.setItem("amountKey", parseAmount);
}
</script>
However, I need the stored data to populate this input field:
<input type="number" class="" id="demo2" value="3000"/>
My best effort so far is:
<script>
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseAmount2;
}
</script>
Any help would be greatly appreciated!

Items from localStorage are defined as strig, your input is defined as number, try parseInt (and do you invoke getValue()?):
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseInt(parseAmount2);
}
getValue();

Once the content on the page loads, you can load the value into the page.
/* modern browsers - will execute code once all elements are loaded onto the client */
window.addEventListener('DOMContentLoaded', (event) => {
// content is loaded, load the value from storage
getValue(); // call the function to perform
});
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseAmount2;
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

I get 'Bad assignment' when trying to use $(this) inside function after .load() method

I couldn't find any solutions for my problem yet. Maybe I used wrong keywords.
I'm trying to update the value of an input field onchange after a .load() action has been performed.
Here is my script:
$(document).on("change",".myInput",function() {
var value = $(this).val();
$('#actionDiv').load("someAction.php?value="+value, function() {
$(this).val('OK');
});
});
So, after someAction.php has been loaded into #actionDiv successfully, I'd like to change the value of that input field, that has been changed.
I have several input fileds, which take this kind of action...
It seems "$(this)" is unknown in the function after load() has been completed.
Can anyone please help?
Thanks

You need to store a reference to the element, or use an arrow method which doesn't change the value of this
$(document).on("change",".myInput",function() {
var that = this;
var value = $(that).val();
$('#actionDiv').load("someAction.php?value="+value, function() {
$(that).val('OK');
});
});
OR
$(document).on("change",".myInput",function(e) {
var value = $(e.target).val();
$('#actionDiv').load("someAction.php?value="+value, function() {
$(e.target).val('OK');
});
});
OR
$(document).on("change",".myInput",function() {
var value = $(this).val();
$('#actionDiv').load("someAction.php?value="+value, () =>{
$(this).val('OK');
});
});

Function out of scope?

I have a function defined as follows:
window.onload = function() {
var ids = document.getElementById("idname");
function myFunction(){
/...*use ids var in here*./
}
}
I am trying to call myFunction from button onclick in html:
<button onclick="myFunction();"></button>
But it says myFunction is not defined. I understand because this is inside window.onload. How can I fix this? I need window.onload because I need to use document.getElementById("testID") to get content.

I need window.onload because I need to use document.getElementById("testID") to get content
No, you don't need window.onload. You simply have to put the code somewhere after the element with ID testID in the document.
Example:
<div id="testID"></div>
<script>
var ids = document.getElementById("testID");
function myFunction(){
/...*use ids var in here*./
}
</script>
However, if you want to keep using window.onload, then I suggest to not use inline event handlers, but bind the handler with JS:
window.onload = function() {
var ids = document.getElementById("testID");
ids.onclick = function(event){
/...*use ids var in here*./
}
};
(that might be a good thing to do anyway).
Lastly, you can get the a reference to the element inside the event handler using this or event.target:
<div id="testID"></div>
<script>
document.getElementById("testID").onclick = function(event) {
// access element via `this` or `event.target`
};
</script>
Learn more about event handling.

You defined it within a function so it's locked to that scope. Maybe you want to define it outside of that:
function myFunction() {
var ids = document.getElementById("idname");
// ...
}
window.onload = function() {
// ...
}
As a note, this is extremely old-school JavaScript. You could clean this up considerably using something like jQuery which would look something like this:
$(function() {
// Any initialization after page load.
});
function myFunction() {
var ids = $('#idname');
// ...
}

Call of a js-function from HTML does not work correctly

i am trying to use some javascript-code within an HTML-Page, but in doesn't work (Everything inside of a Ruby on Rails project).
So i have the following HTML-Code
Render
What I need is to get the parameter "compilation_id" inside the js-function
<script type="text/javascript" language="javascript">
function start_render(event){
var comp_id = $(event.target).attr('compilation_id');
alert(comp_id);
.....
I use alert(comp_id) just for debugging in order to see, if I get the data appropriately. But what I get is "undefined". When I set the value of the variable inside of the js-function, everything is Ok. So,
var comp_id = 51;
alert(comp_id);
works well, I get "51".
What is my mistake?
Thanks in advance.

You are passing this object, which doesn't have target property.
If you want to get event target, change your code as
function start_render(object){
event = event || window.event
var comp_id = $(event.target).attr('compilation_id');
...
}

try this:
onclick="start_render(event)"
JS:
function start_render(e){
var comp_id = $(e.target).attr('compilation_id');
alert(comp_id);
Or:
onclick="start_render(this)"
JS:
function start_render(element){
var comp_id = $(element).attr('compilation_id');
alert(comp_id);
Or:
onclick="start_render()"
JS:
function start_render(){
var comp_id = $(event.target).attr('compilation_id');
alert(comp_id);
Or:
onclick="start_render.call(this)"
JS:
function start_render(){
var comp_id = $(this).attr('compilation_id');
alert(comp_id);
Best way:
Render
JS:
$('#compilation51').bind('click', function(){
var comp_id = $(this).attr('compilation_id');
alert(comp_id);
});

call a function using window[variablename](); in document.ready

I have functions in side a document.ready and I want to call them using value inside a variable.. I tried to use window[variablename](); but it is not working inside document.ready but when called it directly it works..
think this is the function inside the document.ready
$(document).ready(function() {
function jhon(){
alert('works');
};
});
I'm getting function name from a variable,value of that variable is the name of the function..
below code will get the URL's hashed part example: #JHON and remove # and store it inside URLHASH variable..example: JHON
var urlhash = document.location.hash;
urlhash = urlhash.replace(/^.*#/, '');
when I called like this it is not working..
window.onload=function() {
window[urlhash]();
};
but when I call the function like this it is working fine..
window.onload=function() {
jhon();
};
Is it possible to call a function using variable value?

This:
window.onload=function() {
window[urlhashed]();
};
Contains a typo: urlhashed ought to be urlhash
window.onload=function() {
window[urlhash]();
};
In addition to that you have defined jhon() inside of another function, which capture's it in that enclosing functions scope.
if you want to have this work as intended you ought to change this:
$(document).ready(function() {
function jhon(){
alert('works');
};
});
to be more like this:
$(document).ready(function() {
window.jhon = function(){
alert('works');
};
});

Define the function jhon outside of $(document).ready. Otherwise, it'll be hidden, and thus inaccessible via window[function_name]:
function jhon(){
alert('works');
};
$(document).ready(function() {
var urlhash = document.location.hash;
urlhash = urlhash.replace(/^.*#/, '');
window[urlhash]();
});