Why doesn't the following work for me?
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>
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>
Have you tried .innerText or .value instead of .innerHTML?
Because a label element is not loaded when a script is executed. Swap the label and script elements, and it will work:
<label id="lbltipAddedComment"></label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
Use .textContent instead.
I was struggling with changing the value of a label as well, until I tried this.
If this doesn't solve try inspecting the object to see what properties you can set by logging it to the console with console.dir as shown on this question: How can I log an HTML element as a JavaScript object?
Here is another way to change the text of a label using jQuery:
<script>
$("#lbltipAddedComment").text("your tip has been submitted!");
</script>
Check the JsFiddle example
Using .innerText should work.
document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';
Try this:
<label id="lbltipAddedComment"></label>
<script type="text/javascript">
document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
Because the script will get executed first.. When the script will get executed, at that time controls are not getting loaded. So after loading controls you write a script.
It will work.
Related
i am trying to change text of label and textbox text on checkbox clicked.
i have noticed that asp.net fully support js .
<script type="text/javascript">
$(document).ready(function () {
$('#chkhtml').change(function () {
$('#Text1').prop("disabled", !$(this).is(':checked'));
document.getElementById('#Text1').innerHTML = 'newtext';
document.getElementById('#<%=rollLbl.ClientID %>').innerHTML = 'your text goes here';
document.getElementById('#testlbl').innerHTML = 'newtext';
});
});
</script>
However it only enable or disable text box but don't change text of any label or text box.
i have already tried .value .content etc but none of these work plzzz plzz help me .
You have mixed up jQuery and Javascript:
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#chkhtml').change(function() {
$('#Text1').prop("disabled", !$(this).is(':checked'));
$('#Text1').val('newtext');
$('#<%=rollLbl.ClientID %>').html('your text goes here');
$('#testlbl').html('newtext');
});
});
</script>
Please amend below changes in your code, if you want to keep original.
<script type="text/javascript">
$(document).ready(function() {
$('#chkhtml').change(function() {
$('#Text1').prop("disabled", !$(this).is(':checked'));
document.getElementById('Text1').value = 'newtext';
document.getElementById('<%=rollLbl.ClientID %>').innerHTML = 'your text goes here';
document.getElementById('testlbl').innerHTML = 'newtext';
});
});
</script>
You need to change
document.getElementById('#Text1')
to
document.getElementById('Text1')
And the rest of such calls too. getElementById accepts an ID, not a selector.
you may try in jquery
$('#Text1').html('newtext');
$('#<%=rollLbl.ClientID %>').html('your text goes here');
or in plain javascript
document.getElementById('Text1').innerHTML = 'newtext';
document.getElementById('<%=rollLbl.ClientID %>').innerHTML = 'your text goes here';
you need to pass only the id of the element to getelementById(). but jquery uses css query selector so #name means it is an id and .name means it is a class
Please someone tell me what is the problem in the code which i have written.
Js
$("button").click(function() {
document.getElementById("demo").innerHTML = document.getElementById("asd").value;
});
$(function() {
var edit = document.getElementById('demo');
$(edit).blur(function() {
localStorage.setItem("data1", this.innerHTML)
});
if (localStorage.getItem("data1")) {
edit.innerHTML = localStorage.getItem("data1");
}
});
Html
<input type="text" id="asd">
<button>asdsad</button>
<p id="demo"></p>
But the same code is working perfectly in this:
Js
$(function() {
var edit = document.getElementById('demo');
$(edit).blur(function() {
localStorage.setItem("data1", document.getElementById("demo").innerHTML)
});
if (localStorage.getItem("data1")) {
edit.innerHTML = localStorage.getItem("data1");
}
});
HTML
<div contenteditable="true" id="demo">Some text here</div>
Please some one tell me what went wrong here.
When you pass the edit variable (which contains a DOM element) into jQuery as an argument, a jQuery object is returned. That changes the scope of this inside your blur event to a jQuery object. jQuery doesn't have a property of innerHTML, so it returns undefined. JavaScript DOM elements do have an innerHTML property of course, so that's why the second example works.
One way to fix your first example is to replace this:
$(edit).blur(function() {
localStorage.setItem("data1", this.innerHTML)
});
With this:
$(edit).blur(function() {
localStorage.setItem("data1", $(this).html());
});
would you explain please, why this code is showing alert window with the text at the end of radio element:
<script>
function markReply(el){
alert(el.nextSibling.nodeValue);
}
$(document).ready(function(){
markReply();
});
</script>
and this one does not:
<script>
function markReply(el){
return el.nextSibling.nodeValue;
}
$(document).ready(function(){
var msg = markReply();
alert(msg);
});
</script>
there are 4 optional answers selected by radio element, like:
<input type="radio" name="choise" onclick="markReply(this);"/>....some text
Thank you!
The second script just returns the value, without doing anything with it.
Note that in both cases, the call from the document ready function is useless, and probably produces an el is not defined error in the console.
You're not passing any parameters to the markReply() function when you created a variable for it.
Try this:
var msg = markReply(el);
The script that does not alert the message is not working because the parameter of the function markReply is not there when the jquery is loaded.
HTML
<input type="radio" name="choise" id="choise"/>....some text
JS
$(document).ready(function(){
$("#choise").click(function () {
alert(markReply(this));
});
});
function markReply(el){
return el.nextSibling.nodeValue;
}
http://jsfiddle.net/j4sgdton/
I need to use two plug-ins in one element on my page. I've never needed to do this and tried as it is in the code below. Most did not work!
<script type="text/javascript">
$(document).ready(function()
{
var wbbOpt = {buttons: "bold,italic,underline,|,img,link,|,code,quote"}
// plugin one wysibb
$("#editor").wysibb(wbbOpt);
// plugin two hashtags
$("#editor").hashtags();
//the two plugin worked in textarea #editor
});
</script>
Can anyone help me? Thank you.
So you can't use them because each of them take control and wrap the textarea. Since the editor is the most complex of the two the best thing to do is to take the code of the hashtag and adapt it at your need.
So here's a working example, but if you want you can trigger the function I use to the change event (adding it) or some way else
<div id="higlighter" style="width;1217px;"></div>
<textarea id="editor"></textarea>
<br />
<input id="btn" type="button" value="HASH">
<br />
$(document).ready(function() {
var wbbOpt = {
buttons: "bold,italic,underline,|,img,link,|,code,quote"
};
$("#editor").wysibb(wbbOpt);
$('#btn').click(function () { report() });
});
function report() {
$("#hashtag").val($("#editor").htmlcode());
var str = $("#editor").htmlcode();
str = str.replace(/\n/g, '<br>');
if(!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,#?^=%&:\/~+#-]*[\w#?^=%&\/~+#-])?#([a-zA-Z0-9]+)/g)) {
if(!str.match(/#([a-zA-Z0-9]+)#/g)) {
str = str.replace(/#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}else{
str = str.replace(/#([a-zA-Z0-9]+)#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}
}
$("#editor").htmlcode(str);
}
you can check a working code here on jsfiddle.
http://jsfiddle.net/4kj7d6mh/2/
You can type your text and use the editor, and when you want to higlight the hastag you click the button. If you want that to happen automatically you have to change this line:
$('#btn').click(function () { report() });
And attach the function to the keypress for example (experiment a bit)
Why when I do an alert of the value (see below) it returns null? When an element with that ID exists?
// make reference to divs
var countdown_timer = document.getElementById("countdown_timer");
var countdown_image = document.getElementById("countdown_image");
// For element manipulation
if (type == 'image') {
var element = countdown_image;
} else if (type == 'timer') {
var element = countdown_timer;
}
alert(countdown_timer);
The div is as below..
<div class="timer" id="countdown_timer"></div>
It's possible that the javascript is being executed before the elements on your page are not loaded, thus the selector isn't finding anything. Is your javascript above the <body> tag? Try putting it after </body> and see how that works for you.
Another solution is to do:
window.onload = function () {
//put all your JS here
}
onload = function() {
// put you code here
}
Your call to document.getElementById needs to be after the markup for the div.
<div class="timer" id="countdown_timer"></div>
<script type="text/javascript">
var countdown_timer = document.getElementById("countdown_timer");
...
</script>
Alternatively, you could use the window.onload event, which would be the better way to go.