Change Label Text Using JavaScript

Change label text using JavaScript

Because your script runs BEFORE the label exists on the page (in the DOM). Either put the script after the label, or wait until the document has fully loaded (use an OnLoad function, such as the jQuery ready() or http://www.webreference.com/programming/javascript/onloads/)

This won't work:

<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>

This will work:

<label id="lbltipAddedComment">test</label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>

This example (jsfiddle link) maintains the order (script first, then label) and uses an onLoad:

<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function() {
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';

});
</script>

Set label text using JavaScript on a .aspx page

As pointed out by @epascarello, use .innerHTML instead of .html.

The Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.

Read up: Element.innerHTML - Web APIs | MDN

Working snippet:

document.addEventListener("DOMContentLoaded", function(event) {
var target = Number(prompt("Enter The New Number"));
function monthName() { var month = target == 1 ? month = "January" : target == 2 ? month = "February" : target == 3 ? month = "March" : target == 4 ? "April" : target == 5 ? "May" : target == 6 ? "June" : target == 7 ? "July" : target == 8 ? "August" : target == 9 ? "September" : target == 10 ? "October" : target == 11 ? "November" : target == 12 ? "December" : "Unknown Month"; return month; }
document.getElementById('yes').innerHTML = monthName();
});
<label id="yes"></label>

How to change Label Value using javascript

You're taking name in document.getElementById() Your cb should be txt206451
(ID Attribute) not name attribute.

Or

You can have it by document.getElementsByName()

var cb = document.getElementsByName('field206451')[0]; // First one

OR

var cb = document.getElementById('txt206451');

And for setting values into hidden use document.getElementsByName() like following

var cb = document.getElementById('txt206451');
var label = document.getElementsByName('label206451')[0]; // Get the first one of index
console.log(label);
cb.addEventListener('change', function (evt) { // use change here. not neccessarily
if (this.checked) {
label.value = 'Thanks'
} else {
label.value = '0'
}
}, false);

Demo Fiddle

Unable to change label text using JavaScript

You have to wait for the page to be loaded, remove space on script tags and haven't the same name for the class and id

window.onload = function(){
document.getElementById('lblSport').innerHTML = 'Hello';
}

<label class="lblSports" id="lblSport">asas</label>

How to change the text of a label for using javascript/jquery?

You can search using attributes:

$("label[for=id_about]").html("new text here"); // or .text("new text here")

Remember that jQuery lets you use the full power of CSS selectors to find elements on the page (it even adds some of its own, but in general try to stick to official ones).


For anyone who doesn't use jQuery, you can still use the full range of CSS selectors on any modern browser (and IE8) via querySelector (find the first matching element, or null if no match) or querySelectorAll (get a NodeList of matching elements, which might be empty):

document.querySelector("label[for=id_about]").innerHTML = "new text here";

Changing a label's text by the FOR attribute

var id = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0].getAttribute('id');
document.querySelector("label[for='"+id+"']").innerText = 'new text';

It gets the ID and then uses querySelector to get the related label and sets the innertext

How to Change Label Text upon File being Selected within Form using Javascript

Place the <script>...</script> at the very end of the document, just before </body>.

That way, all of the DOM will already have loaded and you won't need to listen for an onload or an onDOMContentLoaded event.

Is it possible to change only text in label (no other elements)?

If I understand correctly, you want to remove the text that is directly contained in your <label> element, without affecting the text of other descendant elements of the label.

This can be achieved without jQuery by iterating the childNodes of your <label> element and clearing the textContent of each text node as shown:

const label = document.querySelector('label');
/* Iterate the nodes of the label */for(const node of label.childNodes) {
/* Clear the text content of each child node that is a text node */ if(node.nodeName === '#text') { node.textContent = ''; } }
<label class="has-checkbox terms">    <input name="order[terms]" type="hidden" value="0">    <div class="icheckbox_minimal" style="position: relative;">        <input class="checkbox" type="checkbox" value="1" name="order[terms]" id="order_terms">        <ins class="iCheck-helper"></ins>    </div>    *ich habe die*    <a href="#">AGBs</a>    *gelesen und stimme diesen zu.*     <span class="terms-error"></span></label>


Related Topics



Leave a reply



Submit