<script>
var a = document.getElementById("text").value;
function toupper()
{
var mystring = new String(a);
document.write(a.toUpperCase());
}
</script>
**HTML**
<input type="text" id="text" name="text" />
<input type="button" id="clickme" value="clickme" name="click" onclick="toupper();"/>
Why the variable "a" cannot be accessed in the "toupper" function?
Pull var a inside the function & you don't have to write new String(a)
function toupper() {
var a = document.getElementById("text").value;
document.write(a.toUpperCase());
}
http://jsfiddle.net/Fn4Ns/3/
The execution of the statement var a = document.getElementById("text").value fails, because when it is executed, the element with id value of text has not been parsed, i.e. does not exist. You need to have document.getElementById("text") inside the function, or otherwise at a point where the element exists.
the problem is that you are trying to execute
var a = document.getElementById("text").value;
before the document finished loading.
please try the following it should work.
var a;
document.addEventListener('DOMContentLoaded', function() {
a = document.getElementById("text").value;
});
function toupper()
{
var mystring = new String(a);
document.write(a.toUpperCase());
}
Variable a is declared outside so it's accessible in both scopes callback for document ready and toupper function.
Get the element value, after you make sure the page (DOM) has been loaded
You need to re-retrieve the reference to the text field on every function call.
DEMO
var writeNewLine = function(text) {
var addChild = function(node) {
window.document.body.appendChild(node);
};
addChild(document.createElement('br'));
addChild(document.createTextNode(text.toUpperCase()));
};
window.toupper = function() {
var mystring = document.getElementById("text").value;
writeNewLine(mystring.toUpperCase());
}
This will work. you assigned value before text boxes has loaded
function toupper(){
var a = document.getElementById("text").value;
document.write(a.toUpperCase());
}
Related
I have some code from input, and I wanna to save it to some body element.
I can add it to the body, but it disappear when page is reloaded
function store(){
var nameOfbook = document.getElementById("nameOfbook");
var value = localStorage.setItem("nameOfbook", nameOfbook.value);
var storedValueBockName = localStorage.getItem("nameOfbook");
var par = document.createElement('P');
par.innerText = storedValueBockName;
document.body.appendChild(par);
}
<form action="\" class="form-login" method="post" />
<input name="text" type="text" id="nameOfbook" required="" placeholder="Book name" />
<button onclick="store()" type="button">StoreText</button>
</form>
This question is basically asking how to retrieve a stored value from localStorage.
So you're setting the value in localStorage, but when you reload the page, you need to have a script that checks to see if there's a value in localStorage and add that data to your page if it is found there.
I would suggest something like:
<script>
var setText = function(text) {
var par = document.createElement('P');
par.innerText = text;
document.body.appendChild(par);
}
var checkLocalStorage = function() {
var value = localStorage.getItem("nameOfbook")
if (value) {
setText(value)
}
}
checkLocalStorage()
function store(){
var nameOfbook = document.getElementById("nameOfbook");
var value = localStorage.setItem("nameOfbook", nameOfbook.value);
var storedValueBockName = localStorage.getItem("nameOfbook");
setText(storedValueBockName)
}
</script>
So I moved the code that appends the title to the page into its own function so that it can be used by both store() and checkLocalStorage(). checkLocalStorage looks to see if there's a value set for nameOfbook and, if there is, passes that value to setText.
Should do the trick.
Getting error when truing to save value from input to localStorage
res.html is not a function
Here is my code:
Enter Text: <input type="text" id="inp" onchange="myFunction()">
<div id="result"></div>
<script>
var inp = document.getElementById('inp');
var res = document.getElementById('result');
function myFunction() {
var str = res.innerHTML = inp.value;
localStorage.setItem('value', str);
if(localStorage.getItem('value')) {
res.html(localStorage.getItem('value'));
}
}
.html() is a JQuery function not a JavaScript one. To achieve what you're doing using JavaScript, you would use .innerHTML. So for example:
res.innerHTML = localStorage.getItem('value');
You wanted to use innerHTML instead of html(). That's a jQuery function.
res.innerHTML = localStorage.getItem('value');
It is not localStorage issue. html is not a defined function in DOM
You can do:
if(localStorage.getItem('value')) {
res.innerHTML = localStorage.getItem('value');
}
This is related to my last questions, but that already had alot of answers so I did not want to modify it with more stuff to avoid confusion.
I can take the input from the input text with the id 'test', and I can display it on the div labeled 'result', but I am not able to modify the output to div
function createLinks()
{
var input = document.getElementById('test')
if(str.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin.value;
}
The HTML is working currently as follows:
<input type="text" id="test" size="16" title="Coming Soon" onkeypress="createLinks()"/>
<input type="submit" style="margin-left: 10px;" value="Search" class="button1"/>
<div id="result"></div>
I work with mainly CGI and have very limited knowledge of JS so I am probably missing something simple or this plain wont work. Thanks for the help in advance.
I fixed your code to what I think you wanted:
function createLinks()
{
var lin;
var input = document.getElementById('test');
if(input.value.indexOf("VALUE")>=0){
lin = "something";
}
else {
lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}
What was wrong was that:
[1] str was not defined
[2] lin was not globally defined, so you couldn't access it.
I updated the code so that it will make result say something if the textbox has VALUE typed in it and somethingelse if it doesn't, and that you can also press the Search button instead of pressing a key.
Try This: str not defined and lin is the value.
function createLinks()
{
var input = document.getElementById('test')
if(input.value.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}
What I want to do is whenever I type a value in the text field, the value typed will be displayed right away.
How do I do it exactly? Is there anyway I could put the value in a variable and use it right away without using onClick?
Here is how I would do it:
<script>
function change(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
</script>
<input type="text" id="text" onkeypress="change()">
<div id="div1"></div>
I don't think you can do it without any events.
Maybe you can do it with HTML5's <output> tag. I don't know it very well, but try some research.
W3Schools have some good examples.
Hope this can help you
Without using the change event? Why on earth would you want this? The only alternative I can think of would be polling at an interval. Something like:
var theValue = "";
var theTextBox = document.getElementById('myTextBox');
// Run 10 times per second (every 100ms)
setInterval(function() {
// Check if the value has changed
if(theTextBox.value != theValue)
{
theValue = theTextBox.value;
}
}, 100);
<script>
function change(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
function changenew(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
</script>
<input type="text" id="text" onkeypress="change()" onchange="changenew()">
is it Possible
you can check to see if your input field is in focus, then listen for any key input events and update your display field with the appropriate characters.
html:
<input type="text" id="myText"/>
<span id="output"></span>
js:
var myText = document.getElementById("myText");
myText.onkeyup = function(){
var output = document.getElementById("output");
output.innerHTML = this.value;
}
demo : http://jsfiddle.net/seUBJ/
(function($) {
var selectIds = new Array();
var sortOnSelect = false;
var nameModifier = "tsms";
function removeFormField() {
$(id).remove();
}
All the other functions after this work. This function says it undefined using firebug.
removeFormField is not defined
Another function creates this field and the top function is suppose to remove it.
<label for="txt4">Field 4 <input type="text" id="txt4" name="txt[]" size="20"> <a onclick="removeFormField("#row4"); return false;" href="#">Remove</a></label>
You need to put your function outside of the document ready function then call it from within.
(function($) {
var selectIds = new Array();
var sortOnSelect = false;
var nameModifier = "tsms";
removeFormField();
});
function removeFormField() {
$(id).remove();
}
In addition to the problem where the function is declared in the jQuery ready() handler, your function as written does not take an input value.
It should be:
function removeFormField(id) {
$(id).remove();
}