My localStorage returns null, and I don't know why, the read function is not used, but just for help I put it anyway. Chrome says that it cannot ste innerHTML into null, and my troubleshooting alert info also returns null, but the code goes to the end. Any help would be useful, thank you. The cookie:
<!doctype html>
<html>
<head>
<cookie>
<script>localStorage.setItem('id',Math.floor(Math.random()*10))
</script>
</cookie>
</head>
<body>
<script>var id = localStorage.getItem('id')
alert(id)</script>
</body>
</html>
The Script:
<!doctype html>
<html>
<head>
<script>
var theId=localStorage.getItem('id')
function change(id,target){
var info = localStorage.getItem(id);
alert(info)
document.getElementById(target).innerHTML=info;
}
function read(){
var element=document.createElement('h1')
element.innerHTML='You Want To Read'
document.body.appendChild(element)
alert('debug')
}
</script>
</head>
<body>
<input type="button" value="Read" name="read_story" id="read_story"
onclick=read();change(theId,info)>
<p id='info'>initial</p>
</body>
<script>
alert('debug');
</script>
</html>
You've misinterpreted the error message.
If it can't set the innerHTML of null then you have something.innerHTML = a_value. It is the something that is null not anything to do with local storage.
In change(theId,info), info is a variable. It is a reference to the element with id="info".
You use it here: document.getElementById(target).
info (now target) gets converted into a string ("[object HTMLParagraphElement]").
There is no element with id="[object HTMLParagraphElement]", so you get null.
When you call the function, you need to pass a string, not a variable.
Related
How can I make a variable be the select Id in a getElement? When I tried it, it returned null. My code is shown below:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
document.getElementById(test).innerHTML = "complete";
</script>
</body
</html>
That code seems to work just fine (with the exception of the unclosed body tag), here is a runnable version of the code, fixed:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
document.getElementById(test).innerHTML = "complete";
</script>
</body>
</html>
Remember, the js code is going to happen almost immediately, so you won't be able to see the "hi" part. If you want it to change after like 1 second, use this:
<html>
<head>
</head>
<body>
<p id = "test">hi</p>
<script>
var test = "test";
setTimeout(function () {
document.getElementById(test).innerHTML = "complete";
}, 1000);
</script>
</body>
</html>
All I changed in that, is put the document.getElementById() into a setTimeout
Hope this helped.
I rarely have to do any Javascript and I seem to fail doing the easiest tasks. I am trying to replace a string in two divs. The first div gets replaced, the second one is not found with the error message:
drawings.html:20 Uncaught TypeError: Cannot set property 'innerHTML' of null
However I tried the usual remedies of putting my code in an 'onload' function and putting the script at the end of the body tag. What else could possibly go wrong?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="cell1">test<div>
<div id="cell2">test<div>
<script>
window.onload = function() {
replace();
}
function replace() {
console.log("replace");
document.getElementById("cell1").innerHTML = "cell1";
document.getElementById("cell2").innerHTML = "cell2";
}
</script>
</body>
</html>
just close your divs elements.
<html>
<head>
</head>
<body>
<div id="cell1">test</div>
<div id="cell2">test</div>
<script>
window.onload = function() {
replace();
}
function replace() {
console.log("replace");
document.getElementById("cell1").innerHTML = "cell1";
document.getElementById("cell2").innerHTML = "cell2";
}
</script>
</body>
</html>
I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page as the original variable input. Thanks!
create a div in your body for result like
<div id="result"></div>
update from script like
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = <your value>
Without additional libraries, using only browser functions, you can do this with the document.getElementById() function like this:
<html>
<head>
<title>test</title>
</head>
<body>
<input type="text" id="textfield">
</body>
<script>
function someFunction() {
return "Hello world!";
}
document.getElementById('textfield').value = someFunction();
</script>
<html>
I have a function as follows:
function textNext(element, num) {
document.getElementById("lblContent").innerHTML = "hello";
}
However, the text of the lblContent label won't change when the function is called.
What am I doing wrong?
btw : lblContent is of type asp:Label
Since lblControl is a server side ASP.NET control, you will need to use the control ClientID property in order to use it in javascript:
function textNext(element, num) {
document.getElementById(<"%=lblContent.ClientID%>").innerHTML = "hello";
}
Check the console in your browser for errors. I tried to reproduce your problem in a standard HTML/Javascript environment.
This works for me.
<html>
<head>
<title>Test</title>
<head>
<body>
<div id="lblContent">Previous text</div>
Change text
<script type="text/javascript">
function textNext() {
document.getElementById("lblContent").innerHTML = "Next text";
}
</script>
</body>
</html>
Your help would be very much appreciated. I do not understand why the following jQuery code does not work:
function saveChanges(obj, n, id) {
var t = "content to send to server";
$.post("http://localhost:8080/Content.do?method=update",{
value: t,
key: id
},function(result){
alert(result); //WORKS
alert("INNER"+$(obj).parent().parent().html());//WORKS
$(obj).parent().parent().after('<div>dddddd</div>').remove();//FAILS ALL
alert(id); //FAILS
alert("stop"); //FAILS
});
}
My conclusion so far is: inside this callback method function(result) I do have READ access to the outer object (here $(obj)) but I do NOT have WRITE access. As soon as I am doing a write the function fails from that point on to the rest of the function.
Is this conclusion correct? If someone knows about a good tutorial who explains this concept I would be greatful. (Object access with jQuery and their scopes...)
thank you very much
There's something else wrong. In an isolated test case, I could not duplicate your error
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//alert = console.log;
$(function(){
function saveChanges(obj, n, id) {
var t = "content to send to server";
$.post("test.php",{
value: t,
key: id
},function(result){
alert(result); //WORKS
alert("INNER"+$(obj).parent().parent().html());
$(obj).parent().parent().after('<div>dddddd</div>').remove();
alert(id);
alert("stop");
});
}
saveChanges( '#test', 1, 'test' );
});
</script>
</head>
<body>
<div>
<div>
<div id="test">
just a test
</div>
</div>
</div>
</body>
</html>
And my test.php
<?php
echo json_encode( $_POST );
?>
I get four alerts
{"value":"content to send to server","key":"test"}
INNER
<div>
<div id="test">
just a test
</div>
</div>
test
stop
It sure has nothing to do with reading or writing "to" a variable. Something else must be going wrong on the first line you marked as "FAIL". You should check this by enabling Firebug in Firefox (if you don't have Firebug installed, drop everything and do that now) and running the sript again.