Use of innerHTML in javascript form - javascript

I see in this example how I can change the id contents with an input button and it works fine:
Example:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
When I try to use this to update a select or checkbox it does not work? What can I use to achieve this result with a form element?
Non-Working Example:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = '2';
}
</script>
<p>Welcome to the site
<input type="checkbox" id="boldStuff" value="1" /></p>
<input type='button' onclick='changeText()' value='Change'/>

innerHTML change the HTML between the opening and closing tag. Since the input tag is a self closing tag (tag that end with />, even though it is valid in HTML5 to leave the / behind), there is no innerHTML.
If you want to change the value, just target the value property :
document.getElementById('boldStuff').value = '2';

You should set the element's checked, not its innerHtml. Setting the innerHtml is equivalent to doing:
<input type="checkbox" id="boldStuff" value="1">2</input>
which is invalid HTML.
If you want to set the checkbox to checked, do this:
document.getElementById('boldStuff').checked = true;

If you want to set the value, set the value (and not innerHTML):
document.getElementById('boldStuff').value = '2';
Most attributes can be found in this way, tho some must be gotten from element.getAttribute and set with element.setAttribute.

to make changes via innerHTML you first need to have a innerHTML value to change
so
document.getElementById('***').innerHTML="2";
the corresponding HTML would need to look similar to this:
<p id="***">some text</p>

Related

How to make user input stored as JavaScript Variable for later use

I am trying to code a program that allows a user to type input and then press a button and the input be printed. I can not seem to get the JavaScript to save the user input. I think it has to do with the value attribute of the text input feild not updating so the JavaScript cannot retrive it. I do not know how to fix this and therfore cannot see if that is what is causing the issue. Any help would be appreciated.
var n = document.getElementById('userInput').value;
function runCode() {
document.getElementById('test').innerHTML = n;
}
<input type="text" id="userInput">
<button type=button id="btn" onclick="runCode()">Click Me!</button>
<p id="test">Orginal Text</p>
Since you are taking the value on page load the value is empty, you should take the value inside the click handler function.
Please Note: If the value is a plain string (not htmlString) instead of innerHTML it is better to use textContent or innerText property of the element.
<input type="text" id="userInput">
<button type=button id="btn" onclick="runCode()">
Click Me!
</button>
<p id="test">
Orginal Text
</p>
<script>
//console.log(document.getElementById('userInput').value == "") // true
function runCode() {
var n = document.getElementById('userInput').value;
document.getElementById('test').textContent = n;
}
</script>
You are referencing the value of the input at the start of the JS execution which will have the initial value of the input which is empty string.
Try putting this
var n = document.getElementById('userInput').value; inside the function

How to get text from an input element and change some other elements value?

I have an input element:
<input type="text" />
How can I get text from this input? and then how to print it somewhere else in the page or how to change text of another element in the page to it?
you need to write an id to input like a < input type="text" id="txtname" >, now in javascript you can get and set text=
$('#txtname').val() <- get text from input
$('#txtname').val('some text') <- set text to input
or
$(input[type="text]").val() but this select all input with type text
Try the following
var inputElem=document.getElementsByTagName('input')[0];
inputElem.style.textAlign='center';
var textInput=inputElem.value;
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<input type="text">
<!-- End your code here -->
</body>
</html>
Try this:
<input type="text" id="inputID">
To get text from input box using jquery
$('inputID').val();
To get text from input box without jquery
document.getElementById('inputID').value;
<input type='text' name='myInput' id='myInput' />
In order to get inputs value using javascript you need to do select it with getElementById() method of document object:
var inputValue = document.getElementById("myInput").value;
Now that you've fetched & stored it in a variable, It seems you want to put it somewhere in page. To achieve this, you should first find the element which you want to change its value & then assign inputValue to its text or innerHTML:
//Assume we have an `h1` element in our desired position in the doc
<h1 id="targetPosition">....</h1>
Now we'll assign inputValue to h1:
document.getElementById("targetPosition").innerHTML = inputValue;

How to use javaScript variable, inside html checkbox value parameter?

In my file I have javaScript variable name 'testJava'
<script>
var testJava = 'script Test';
</script>
At the bottom of the page I have a checkbox. I need to add 'testJava' variable to the value of the checkbox.
<input type="checkbox" name="website[]" value= "I_WANT_TO_ADD_IT_HERE" />My Test<br />
value = "<script>document.write(testJava);</script>" doesn't work
Can anyone please tell me how to do this?
<script>
var testJava = 'script Test';
document.getElementById('checkbox_ID').value = testJava;
</script>
You should add an id tag to your <input> element to identify it:
<input type="checkbox" name="website[]" id="thecheckbox" />
Using jQuery, it's quite easy to change the value:
$('#thecheckbox').val(testJava);
To include jQuery, e.g. use the following script tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Try this:
var checkBox = document.getElementsByTagName("input")[0];
checkBox.value = testJava;
Note: this must be done within a window.onload event or in a script positioned after the checkbox HTML.
You can't directly do what you're asking, so just set the value after the fact:
<input type=checkbox id=cb1 ...> My Test
<script>
document.getElementById('cb1').value = testJava;
</script>
Also, Java and JavaScript are not the same thing.
Make sure the <script> is after the <input>, or else that it's in a "load" or "ready" event handler.
<input type="checkbox" name="website[]" id="check_box" value= "I_WANT_TO_ADD_IT_HERE" />My Test<br />
in your script, after the dom ready,
document.getElementById("check_box").value("testJava");

Text input focus loss event

I have the following page. I want to restore the input text if it has not been changed (when the focus is lost). How can I do this?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function clearTextArea(object){
object.value = "";
}
</script>
<input type="text" id="option" value="test" onfocus="clearTextArea(this);"></input>
</body>
</html>
Is there anything against using an
<input (...) onblur="this.value = 'test'">
listener?
(You can also do the same thing using a "placeholder" attribute if youre working with HTML5)
At your clearTextArea method take the current text in the text area and store in into a hidden field or a cookie. Then at on blur event, check if the value changed.

How to update an input text from javascript?

I have this simple code that speaks for itself.Here it is:
<script language='javascript">
function check() {}
</script>
<div id="a">input type="text" name="b">
<input type="button" onClick=" check(); ">
All i want is that when i press the button, the text field gets a value updated to it.
I tried using b.value=" C " but it doesnt seem to work.
<script language="javascript">
function check() {
document.getElementById('txtField').value='new value here'
}
</script>
<input id="txtField" type="text" name="b"> <input type="button" onClick=" check(); ">
This will do. I gave it an ID, and used getElementById('txtField') using the id, and updated it's value.
You seem to be thinking that giving a form input a name attribute makes it addressable as though it were a global variable. It doesn't. There is a syntax for that, and you would have to use something like:
document.forms[0].b.value = "C";
in order to get to address it successfully. You are putting your form elements inside a form, aren't you?
Do it that way, or use an ID along with the getElementById method, as mplacona suggests.

Categories