Javascript: Created input field doesn't show - javascript

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...

Related

Set value using elementbyid in 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;

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.

How to make a JavaScript result appear on the same page, not in an alert popup window

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>

Create Elements Thru Javascript MessUp

I am trying to create a <div><div><div><input type="text"></div></div><div> via javascript. But somehow, the code seems to be not working. I have tried to use DOM methods to create the above mentioned but nothing seems to work. Please Help!!
<html>
<head>
<script>
function newFunc2()
{
a=document.createElement('div');
b = document.createElement('input type="text"');
a.appendChild(b);
c=document.createElement('div');
c.appendChild(a);
var d=document.getElementById('new1');
d.appendChild(c);
}
</script>
</head>
<body>
<input type="button" id="btn" value="ChangeCase" onclick="newFunc2()"/>;
<div id="new1">
</div>
</body>
</html>

Try
b = document.createElement('input');
b.setAttribute("type","text"); // Here you can set radio,checkbox according to need
instead of
b = document.createElement('input type="text"');
Fiddle
To specify the type of the input you can have the setAttribute()
Docs:
document.createElement()
setAttribute()

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