Set value using elementbyid in Javascript - javascript

I am trying to set a value with Javascript using getElementById but it is not working. Can anyone see what I'm doing wrong? Sorry if this is basic question. Have not used JS in a long while.
<html>
<head>
<script>
function setSymbol(sym) {
//alert("hi");
document.getElementById("personName")=sym;
}
</script>
</head>
<body onload="setName('John Ford')">
<script type="text/javascript">
new awesome.widget({
"name": "<span id = personName>",
"locale": "en"
});
</script>
</body>
</html>
Thanks for any suggestions.

You are looking for .innerHTML or better yet .textContent:
document.getElementById('personName').textContent = sym;

Related

How can I make a variable be the select Id in a getElement

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.

HTML localStorage Returns Null

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.

Javascript: Created input field doesn't show

The following produces no visible input text field. What gives?
<!DOCTYPE html>
<head>
</head>
<body>
<script>
var my_input = document.createElement('INPUT');
my_input.type="text;
my_input.value = "blah";
document.body.appendChild(my_input);
</script>
</body>
</html>
You have a syntax error in your code
my_input.type="text;
should be
my_input.type="text";
Check this out
Easy way
document.write("<input type=\"text\"...blah blah...></input>");
Or correct your error
my_input.type="text;
to
my_input.type="text";
Note: Change the ...blah blah...

function not working to convert html

I am wondering if someone can spot the mistake in my code?
javascript:
function decodehtml(thestring){
var decoded = $("<div/>").html(thestring).text();
alert(decoded);
return decoded;
}
inside html:
<script type="text/javascript">
decodehtml("test string");
</script>
I know it is both returning and alerting, the alert is in there just for the test. For some reason this is doing nothing.
Any ideas?
Simon
Edit:
Even placing this directly into the html does not work:
<script type="text/javascript">
var decoded = $("<div/>").html("test string").text();
alert(decoded);
</script>
function decodehtml(thestring) {
var decoded = $("<div/>").html(thestring).text();
alert(decoded);
return decoded;
}
decodehtml("stuff");
Seems to work fine. Here's the jsFiddle
$ is not defined
This means you are not including jQuery. Place this in your head tag :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
And then put your code.

javascript error with label

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>

Categories