I want to suggest a variable which contain data by user from input section and store it into my variable so how I can do this in JavaScript? I suggest a = .... but that does not work as expected
let a = document.getElementById("link");
function lol() {
document.getElementById("print").innerHTML = `a`;
}
<input type="text" id="link" name="link">
<button id="btn" onclick="lol()">Upload Video</button>
<p id="print"></p>
You have to pass event and it's target value not only make reference from input to paragraph.
Adrian
function lol() {
document.getElementById("print").innerText = a.value;
}
Use innerText instead of innerHtml to avoid html syntax passed through that input.
If you put variable name in parentheses it will treat it as text and not variable.
And a is input field with many options, to access value you use a.value
Related
I will give you a snippet to show you what I want to achieve and what I got instead.
function myfunc(){
var qwertyui = this.innerHTML;
document.getElementById('mydiv').innerHTML = qwertyui;
}
<input type="text" onkeyup="myfunc(this)"/>
<div id="mydiv"></div>
I wanted to get the innerHTML of the input through the JavaScript "this" keyword, but now it tells me undefined.
You need to accept the element as the parameter. Furthermore, you should get the value of the input to obtain what the user entered, as opposed to its innerHTML.
function myfunc(elem){
document.getElementById('mydiv').innerHTML = elem.value;
}
<input type="text" onkeyup="myfunc(this)"/>
<div id="mydiv"></div>
I'm trying to accomplish a live character counter for a text input field, but cannot seem to make it work. The onkeypress-function either go as undefined or is just called once when loading the page
Simply assigning the function with onkeypress=" " does not seem to work.
Additionally, I want to update the text of charcountLabel; which I cannot seem to do. Simply using 'document.getElementById' for updating its innerHTML does not work.
How do I correctly assign keypress-functions to html-elements in .ejs?
How do I access and update innerHTML of other elements?
See code below:
<input type="text" id="textContent" onkeypress="charcount">
// Should be live-updated with the length of input text above.
<span id="charcountLabel"> 0 </span>
<script>
function charcount() {
var characterCount = document.getElementById("textContent").innerText.length;
document.getElementById("charcountLabel").innerHTML = characterCount;
}
</script>
Here you are
<input type="text" id="textContent" onkeypress="charcount()">
<!-- Should be live-updated with the length of input text above. -->
<span id="charcountLabel">0</span>
<script>
function charcount() {
var characterCount = document.getElementById("textContent").value.length;
document.getElementById("charcountLabel").innerHTML = characterCount;
}
</script>
Use parenthesis () to call the function and replace innerText with value property.
Note that // is comment in Javascript, not in html where you should use <!-- your comment --> instead.
Last, it has nothing to do with ejs.
How do I change the case of a character in a textbox/textarea to lowercase onchange?
<html>
<head>
<title>Page Title</title>
<script>
function f2(string)
{
string=string.toUpperCase();
alert(string);
}
</script>
</head>
<body>
<p>Here are my text entry objects:</p>
<form>
<p>
Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
<textarea onchange='f2(this.value);'></textarea>
</p>
</form>
</body>
Have you tried;
function f2(textarea)
{
string = textarea.value;
alert(string);
string = string.toLowerCase();
textarea.value = string;
}
With the modification to the onChange as;
<textarea onchange='f2(this);'></textarea>
Simply change the value and assign it back.
<textarea onchange='this.value=this.value.toLowerCase();'></textarea>
Because nobody fixed your code
HTML:
<p>Here are my text entry objects:</p>
<form>
<p>
Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
<textarea></textarea>
</p>
JS:
document.getElementsByTagName("textarea")[0].addEventListener("change", function () {
this.value = this.value.toLowerCase();
});
You want to add a change event handler. Inside the event handler you merely overwrite the value property of the element with the string changed to lowerCase.
I also fixed your in-line javascript in your HTML. It is the devil, avoid it.
Live Example
Just use the .toLowerCase() method.
Use onchange='this.value = this.value.toUpperCase();' to make the text uppercase. Replace toUpperCase with toLowerCase for the opposite.
If desired, you can use your own function instead of just toUpperCase, passing either just the textarea's value or the entire textarea. For example (value only):
<!-- HTML -->
<textarea onchange='this.value = f2(this.value);'></textarea>
// JavaScript
function f2(oldText) {
var newText = oldText.toUpperCase();
return newText;
}
Or (entire textarea):
<!-- HTML -->
<textarea onchange='f3(this);'></textarea>
// JavaScript
function f3(ta) {
ta.value = ta.value.toUpperCase();
}
I would pass this and then work on it like a DOMNode:
<p>Here are my text entry objects:</p>
<form>
<p>
Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
<textarea onchange='f2(this);'></textarea>
</p>
</form>
function f2(el) {
el.value = el.value.toLowerCase();
}
http://jsfiddle.net/HDR8t/1
Problem 1
I believe the onchange event only gets fired when the <textarea> no longer has focus. Instead, you'll want to use the onkeyup event.
Problem 2
You're only passing the string to the function. If you want to change the actual text in the <textarea>, you'll need to pass the actual DOM element to your function:
<textarea onkeyup="f3(this)"></textarea>
Problem 3
Once you pass the element into your function, you'll need to update its value attribute:
function f3(elem) {
elem.value = elem.value.toLowerCase();
}
Try the [.toLowerCase()][1] method.
<textarea onchange='this.value=this.value.toLowerCase();'></textarea>
I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties and attributes and couldn't figure out what I was doing wrong.
The activeElement selector works fine, it is selecting the correct element.
Edit: I just found that it's the value property. So I'd like to change what I'm asking. Why doesn't changing innerHTML work on input elements? Why do they have that property if I can't do anything with it?
Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
value applies only to objects that have the value attribute (normally, form controls).
innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).
They are not equivalent or replaceable. Depends on what you are trying to achieve
First understand where to use what.
<input type="text" value="23" id="age">
Here now
var ageElem=document.getElementById('age');
So on this ageElem you can have that many things what that element contains.So you can use its value,type etc attributes. But cannot use innerHTML because we don't write anything between input tag
<button id='ageButton'>Display Age</button>
So here Display Age is the innerHTML content as it is written inside HTML tag button.
Using innerHTML on an input tag would just result in:
<input name="button" value="Click" ... > InnerHTML Goes Here </input>
But because an input tag doesn't need a closing tag it'll get reset to:
<input name="button" value="Click" ... />
So it's likely your browsers is applying the changes and immediatly resetting it.
do you mean something like this:
$('.activeElement').val('Some text');
<input id="input" type="number">
document.getElementById("input").addEventListener("change", GetData);
function GetData () {
var data = document.getElementById("input").value;
console.log(data);
function ModifyData () {
document.getElementById("input").value = data + "69";
};
ModifyData();
};
My comments: Here input field works as an input and as a display by changing .value
Each HTML element has an innerHTML property that defines both the HTML
code and the text that occurs between that element's opening and
closing tag. By changing an element's innerHTML after some user
interaction, you can make much more interactive pages.
JScript
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
HTML
<p>Welcome to Stack OverFlow <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
In the above example b tag is the innerhtml and dude is its value so to change those values we have written a function in JScript
innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
For instance:
document.getElementById("example").innerHTML = "my string";
This example uses the method to "find" an HTML element (with id="example") and changes the element content (innerHTML) to "my string":
HTML
Change
Javascript
function change(){
document.getElementById(“example”).innerHTML = “Hello, World!”
}
After you clicked the button, Hello, World! will appear because the innerHTML insert the value (in this case, Hello, World!) into between the opening tag and closing tag with an id “example”.
So, if you inspect the element after clicking the button, you will see the following code :
<div id=”example”>Hello, World!</div>
That’s all
innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
Example.
HTML
Change
Javascript
function FunctionName(){
document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}
On button Click, Hello, Kennedy! will appear because the innerHTML insert the value (in this case, Hello, Kennedy!) into between the opening tag and closing tag with an id “example”.
So, on inspecting the element after clicking the button, you will notice the following code :
<div id=”example”>Hello, Kennedy!</div>
Use
document.querySelector('input').defaultValue = "sometext"
Using innerHTML does not work on input elements and also textContent
var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>
Instaed of using InnerHTML use Value for input types
I'm trying to find out how I can use javascript to capture the name of a field and assign the name to a variable. I've done a good amount of searching, but I can only find out how to capture the value of a field and not the name of the field itself.
For example, say I have a asp textbox named "ClientFName". I'd like to use javascript to capture the name of the textbox (ClientFName) and assign the name to a variable.
I'm moderately experienced with javascript but I haven't figured out a way to make this happen. Any help would be great!
You need to find the element in the DOM (which I assume you can do since you can get the value). Then use .name to access its name property, which you can then assign to a variable.
var myName = document.getElementById("myTextbox").name;
By getAttribute() method you can get the attribute value, just check this:
<script>
function check(){
var v= document.getElementById('mytext').getAttribute('name');
alert(v);
}
</script>
<input type="text" id="mytext" value="test" name="mytext1" />
<input type="submit" name="submit" value="submit" onclick="check();"/>