I have this code:
<div id='html'><input type='text' value='' /></div><br><a onClick="alert(document.getElementById('html').innerHTML);">click me</a>
http://jsfiddle.net/EQ88q/
If you change input value and click on "click me" you won't see the real input value. Is there any propety instead of "innerHTML" that gets the real values?
PS: I'm using plain javascript I can't use any library.
This will work, but it is quite crude:
<div id='html'>
<input type='text' value=''/>
</div>
<script>
function LinkClick()
{
var ele = document.getElementById('html');
ele.children[0].setAttribute("value",ele.children[0].value);
alert(ele.innerHTML);
}
</script>
<br><a onClick="LinkClick()">click me</a>
I see ComCrude just provided this exact answer in the comments
The elem.innerHTML is the HTML code inside of the element. In this case, the innerHTML is empty string as there is no content inside the tag.
You should use input_elem.value to obtain the value property of a input element.
Related
I cannot manage to change the inner html of a div element
<div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd"
data-type="input" placeholder="Chat Message" contenteditable="true" id="chatMessageSurrogate"
data-toggle="tooltip" data-placement="top" data-title="Please input a message within 300
characters." autocomplete="off" style="height: 63px;">wafwafgz</div>
I've tried the following:
$(".emoji-wysiwyg-editor.form-control").val("Hello!")
document.getElementsByClassName(".emoji-wysiwyg-editor.form-control").innerHTML = "Hello!"
but none of them is working
$(".emoji-wysiwyg-editor.form-control").html("Hello!"); should work
as stated previously .html("hello") should work, but also, getElementsByClassName i believe only works on a single class name and returns and array, so the below should also work
$(".emoji-wysiwyg-editor.form-control").html("Hello!");
// or
document.getElementsByClassName("emoji-wysiwyg-editor")[0].innerHTML = "Hello!"
In your HTML code there are two different class "emoji-wysiwyg-editor" and "form-control". So you have to use any of one.
$(".emoji-wysiwyg-editor").html("Hello!");
$(".emoji-wysiwyg-editor .form-control").html("Hello!");
And you want to add html contents in DIV so you have to use html. val is use for input typt.
in pure JavaScript with the use of multiple class.
document.getElementsByClassName("emoji-wysiwyg-editor form-control")[0].innerHTML = "hello";
Using JS,
var a = document.querySelector('.emoji-wysiwyg-editor');
a.innerHTML = "Hello";
How is it possible to return a string from a JavaScript Code into a HTML attribute like in the following example?
<div class="xx" animation="yy" animate-duration="<spript>Code goes here<script>" ...>
</div>
I can not get it right, is there a solution?
<div class="xx" id="id1" animation="yy"></div>
<script>
document.getElementById("id1").setAttribute("animate-duration", "your value");
</script>
The id of the above <div> tag is id1. So document.getElementById("id1").setAttribute("animate-duration", "your value"); selects the <div> tag and sets it's animate-duration value to whatever you set.
I don't think your example will work because the script tags will only be treated as a string. I suggest you use Element.setAttribute(attribute name, attribute value) if you only want to set the attribute of the element.
<div class="xx"></div>
<script>document.querySelector(".xx").setAttribute("animate-duration", "value");</script>
See the following for more info:
https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute
I have two places, the first is,<textarea></textarea> and used to write the code.
The second is, <pre></pre> and used to display the code.
The problem is, when write a code in the text area to display it in the second place, the code is applied and displayed as HTML element not just code as I want.
The wrong behavior:
The correct behavior (What I want):
The code:
<textarea id="inputCode" cols="50" rows="10"></textarea><br/>
<pre id="outputCode"></pre>
Using innerText to set the value of the second textarea will add the textual value only, not the HTML.
<pre id="code"></pre>
document.getElementById("code").innerText = "<input type='text' />";
Will insert in to the pre tags,
<input type='text' />
Example
JSFiddle
This question already has answers here:
Append text to textarea with javascript
(3 answers)
Closed 8 years ago.
How can we pass a string from js file to HTML? Assume I have declared a string in privacy.js and I need to get in to my html text area.
I have imputed the script file:
<script type="text/javascript" src="js/privacy.js"></script>
I am assinging string value in to a div
document.getElementById("privacy_text").innerHTML = privacy_string;
I need the Sting value in text area
<textarea class="terms" readonly="readonly">
<div id="privacy_text"></div>
</textarea>
Don't embed a div in a textarea and rather assign it it's own id:
<textarea id="privacy_textarea"></textarea>
And then try to assign a value to it:
document.getElementById("privacy_textarea").value = privacy_string;
Here is a working example.
You could as well use innerHTML but textarea is a form element so I'd recommend to use value.
Give your textarea an ID like, this
<textarea class="terms" readonly="readonly" id="theTextarea">
</textarea>
and then use the following JavaScript to select it and change the value:
document.getElementById("theTextarea").value = "theValue";
If you have access to jQuery, you can use:
$("#theTextarea").val("theValue");
Fiddle
Either way, a div can't go inside a textarea.
If you can assign an ID to your textarea...
<textarea id="myTextArea"></textarea>
Then this should work:
document.getElementById("myTextArea").value = privacy_string;
Give that textarea an ID , then set value to text area like document.getElementById('your text area id').value=privacy_text; from javascript file.
eg:
<script>
var privacy_text="your string";
document.getElementById(textId).value=privacy_text;
</script>
<textarea id="textId"></textarea>
Try this:
document.querySelector(".terms").value = 'someValue';
You can find HTML elements from javascript using document.querySelector by using different type of "query filters" in the above example it is finding the text area by CSS class using .cssClass.
Regarding the div inside your textarea object please note that is not possible. You can only non-HTML text.
<html>
<head>
<script type="text/javascript">
function printValue()
{
var name="Anand";
document.getElementById("textbox1").innerHTML=name;
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="GetText" onclick="PrintValue()"/>
</body>
</html>
Instead of .innerHtml, use this:
document.getElementById("privacy_text").value= "Hello";
I'm trying to take user form input and display it back to the user, among other things (all of which require the input being stored as a JS variable).
I'm trying to spit it out in an alert, as a quick feedback loop, and all I keep getting is [object HTMLInputElement]. I've tried to use document.forms[0] and document.getElementById (like below) and neither work. Also, I'm using bootstrap typeahead, could that be complicating this issue?
What am I missing?
Here's the code:
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
<input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
<script language="JavaScript" type="Text/JavaScript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1>Input:
<script language="JavaScript" type="Text/JavaScript">
document.write(theInput.value);
</script>
</h1>
Edit: PART II, now the code works for the alert, but I need to use it elsewhere (like I said) and the variable isn't available in other sections of the html. Above, I'm just trying to get it to display that same value as a part of the html. It could be my JS, but this is pretty boilerplate stuff, so I think it's related to the location of the variable.
What do I need to do use it elsewhere? I've added the next div above to show what I'm trying.
--left an extra declaration of the variable in part II by accident, was one of the tests I was trying, removed now.
Right now, the object you're alerting is an HTML element, not a string. You can get its value using the value property:
alert('you chose ' + theInput.value)
(Note that you probably didn't mean:
var theInput = document.getElementById('txtvarInput').value;
As other answers suggest, because that would give you an empty string. It's only read once.)
You are trying to output the entire HTML-object that you have selected, not the value-property of it. Since alert() expect a string, JavaScript gives you the string representation of that object which is [object HTMLInputElement].
Try this instead:
var theInput = document.getElementById('txtvarInput').value;
var theInput = document.getElementById('txtvarInput');
should be
var theInput = document.getElementById('txtvarInput').value;
In the alert, use
theInput.value
You need to use the value property:
var theInput = document.getElementById('txtvarInput').value;
You forgot .value
Something like:
document.getElementById('txtvarInput').value
You are going to print the value of the input at the page load time. You will get an empty alert.
just do this!
<input name="submit" type="submit" class="btn" value="Select" onclick="alertVal()"/>
<script language="JavaScript" type="Text/JavaScript">
function alertVal(){
var theInput = document.getElementById('txtvarInput').value;
alert('you chose ' + theInput);
}
</script>