If I have a textarea including some HTML code, how can I write a JavaScript function to show the HTML output instead of HTML code itself, for example:
<textarea id="mytextarea">
<table border=1><tr><td>cellone</td>td>celltwo</td></tr></table
</textarea>
<input type=button onclick="HTMLoutput();"/>
<script>
HTMLoutput()
{
//Code to show html output instead of html code in textarea
}
</script>
How can I do this? What is the suggested code to write inside the HTMLoutput()?
So to convert the the html code to a formated html you need to do:
$('resultDiv').append($('<div/>').html($('.txtArea').val()+"<br>");
here's an example that use div with contentEditable set to true.
It sounds like you're asking how to take some HTML and display its rendered result in your document.
That's exactly what the innerHTML property does.
Simply pick a DOM element to display the result in, and set its innerHTML to the HTML to display.
Related
So I have a HTML file with an embedded script. A Java application sends a value to this HTML file. Now I wonder how to pass this value from the HTML down to the script. Is this even possible?
Here is the simplified HTML file with my approach:
<html>
<body>
<div id="test">
[VALUE_FROM_BACKEND] // prints "let valueFromBackend = 1234"
</div>
<script>
console.log(document.getElementById('test').value);
// should return: let valueFromBackend = 1234;
// actually returns: undefined
</script>
</body>
</html>
Unfortunately, I can't pass the value from the Java application directly to the script. I got the above approach from here, but this doesn't work.
Other solutions only focus on getting values from remote HTML pages, declaring the HTML files's source in the script tag. But since it is an embedded script here, this also seems not to work.
Does anyone know how to deal with the situation? Help will be much appreciated.
Only HTML input elements have a value in javascript. A div cannot have a value, which is why your code returns undefined.
To access the text inside a regular HTML element, such as a div, use element.innerText instead.
Here is a working code snippet you can try out:
console.log(document.getElementById('test').innerText);
<div id="test">
let valueFromBackend = 1234
</div>
As you want to get value of a div element, so the syntax is:
document.getElementById('test').innerHTML
Remember that getElementById().value works for input and use getElementById().innerHTML for elements like div
I am reading some rich-content text from server and trying to display it in a grid in plain-text format. That's where i got this problem. I am not able to get rid of html styling tags. I dont want to write some dirty JS/Jquery code to remove HTML styling tags as it is not possible to handle all of the tags. So I thought to do a trick and created a hidden textarea on HTML page:
<textarea name="textarea" id="temp_desc" rows="10" cols="50" style="visibility: hidden"></textarea>
In JS, when I read data from server, I write it in this textarea and then read it back so that all html tags should strip down but It is not working. The html tags themselves get written in this textarea:
document.getElementById("temp_desc").value = Description;
Description = document.getElementById("temp_desc").value;
Any other suggestions how can i make this work?
Thanks.
I solved this problem by using DIV instead of textarea and JQuery method .text().
HTML:
<div id="temp_desc" style="visibility: hidden"></div>
JS:
$("#temp_desc").html(Description);
var descHiddenDIV = document.getElementById("temp_desc");
var temp_description = $(descHiddenDIV).text();
After executing above JS code, temp_description contains plain-text.
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 have an issue with innerHTML and getElementsById(); method but I am not sure if these two methods are the root of the issues i have.
here goes my code :
<script type="text/javascript">
function clearTextField(){
document.getElementsById("commentText").value = "";
};
function sendComment(){
var commentaire = document.getElementById("commentText").value;
var htmlPresent = document.getElementById("posted");
htmlPresent.innerHTML = commentaire;
clearTextField();
};
</script>
and my HTML code goes like this:
<!doctype html>
<html>
<head></head>
<body>
<p id="posted">
Text to replaced when user click Send a comment button
</p>
<form>
<textarea id="commentText" type="text" name="comment" rows="10" cols="40"></textarea>
<button id="send" onclick="sendComment()">Send a comment</button>
</form>
</body>
</html>
So theorically, this code would get the user input from the textarea and replace the text in between the <p> markups. It actually works for half a second : I see the text rapidly change to what user have put in the textarea, the text between the <p> markup is replaced by user input from <textarea> and it goes immediately back to the original text.
Afterward, when I check the source code, html code hasn't changed one bit, given the html should have been replaced by whatever user input from the textarea.
I have tried three different broswer, I also have tried with getElementByTagName(); method without success.
Do I miss something ? My code seems legit and clean, but something is escaping my grasp.
What I wanted out of this code is to replace HTML code between a given markup (like <p>) by the user input in the textarea, but it only replace it for a few milliseconds and return to original html.
Any help would be appreciated.
EDIT : I want to add text to the html page. changing the text visible on the page. not necessarily in the source. . .
There is no document.getElementsById, however there is a document.getElementById. This is probably the source of your problem.
I don't think there is any document.getElementsById function. It should be document.getElementById.
"To set or get the text value of input or textarea elements, use the .val() method."
Check out the jquery site... http://api.jquery.com/val/
I have an asp:Literal on my page (which cannot be converted to a Label or any other control) that I need to change the text of via JavaScript. I have the following code that works for a Label. Can anybody help?
<script type="text/javascript">
function changeText() {
document.getElementById('<%= Test.ClientID %>').innerHTML = 'New Text';
}
</script>
<a href="#" onclick='changeText()'>Change Text</a>
<asp:Label id="Test" runat="server" Text="Original Text" />
Thanks
UPDATE:
I cannot change from a literal as the code behind writes HTML/CSS to it for an Information Message e.g:
LITMessage.Text = "<div class='success'>Information Successfully Updated</div>"
<asp:Literal> controls don't create their own HTML tag.
Therefore, there is no element that you can manipulate.
Instead, you can wrap the <asp:Literal> in a <div> tag with an ID.
An ASP.NET Literal doesn't add any markup to the page. Therefore you have to wrap your content in some container so that you can edit it via JavaScript:
Assuming you had the following Literal on the page:
<asp:Literal runat="server" Id="literalControl" />
And were setting the text via code behind (because if you're not, you could just create the span/div in the markup to begin with and not have this issue):
literalControl.Text = "Some text you want to change";
The code behind becomes:
literalControl.Text = "<span id='myId'>Some text you want to change</span>";
And the JavaScript would be:
document.getElementById('myId').innerHTML = 'New Text';
Does the literal contain html markup?
if not, you could wrap the literal control in a div and give it an id. Then use js to replace the text within that div.
in response to your update:
In that case, since you are rendering a div with a class of success, I would use jQuery to update the html in that div...it would be as simple as:
$('.success').html('new html goes here');
Wrap the <asp:literal> control in a <div> and then use jQuery if needed to clear the contents like shown below:
<div id="divMyText">
<asp:Literal ID="MyText" runat="server"></asp:Literal>
</div>
Here is how to clear the text using jQuery:
//Clear the html inside of the div
$("#divMyText").html("");
A Literal is a direct render of text to the page. The only HTML it will render will be the HTML markup you include in the text string you set to the Literal. Instead of using a Literal surrounded by a div (unless you specifically want that functionality) you can use an ASP Label and perform operations on it.