i want to replace class me to old when user clicks on a tag, i want to do that only with .replace function. My purpose to learn how replace method work. But the function which i have made not working.
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$(this).attr('class').replace('me','old')
})
})
</script>
</head>
<body>
click
</body>
replace is not a jQuery function it is a function of string. You can read more about replace here. To use replace, you can read the attribute as a string, replace the contents of the string and then add the attribute back.
I don't think it is the best way to do this if you have jQuery loaded. You can use the jQuery utility designed to do these manipulations, like so:
$(this).toggleClass('me old');
This will turn on and off (toggle) both those class names. In effect it will switch from one to the other.
Docs:
http://api.jquery.com/toggleClass/
you are getting the class and it doesn't effect the class attribute, you can replace the string then set it to the element:
$('a').click(function(){
var cls = $(this).attr('class').replace('me','old')
$(this).removeClass('me').addClass(cls)
})
})
$('a').click(function(){
$(this).replaceWith('click');
});
I have created a bin with the solution on http://codebins.com/codes/home/4ldqpco
Try this instead:
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
var theclass = $(this).attr('class');
theclass = theclass.replace('me', 'old');
$(this).attr('class', theclass);
})
})
</script>
</head>
<body>
click
</body>
That should do the trick. JSFiddle Link
Related
I am using a script to make tables in html sortable. The script is here- http://www.kryogenix.org/code/browser/sorttable/. I want the text which sorts the html table to be clicked automatically when the i loaded. The autoclick script i am using is this-
<head>
<script LANGUAGE='javascript'>
function autoClick(){
document.getElementById('sort').click();
}
</script>
</head>
<body onload="autoClick();">
<table><tr><th><p id="sort">Click here to sort the table</p></th>...
The problem is that this is not working and i am confused that why this isnt working.
--------------------EDIT------------------
Sorry for this but actually i was typing something wrong in the body onload statement. Thus the script i was using was correct.
Where have you defined your event?
Because I see juste one function in your onload.
Below, a little example which work fine:
<html>
<head>
<script type='text/javascript'>
var init = function()
{
document.getElementById('test').addEventListener('click', function() {
alert('Auto test is ok');
}, false);
};
function autoClick(){
document.getElementById('test').click();
}
</script>
</head>
<body onload="init(); autoClick();">
<button id="test">Test</button>
</body>
</html>
It's always safer to use Jquery library. Just include the latest Jquery library on your header section of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and this function Should solve your issue:
$("#sort").live('click');
I think you missed the class name in the table
Please add your table tag with class name called "sortable".
I'm trying to figure out why my jQuery isn't working. I've got jQuery linked to, and then after that, I try to bind to the textarea content. I've used name=content and name=#content both.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length)
});
</script>
Why isn't it working?
Code is now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=#content]').bind('keyup',function(){
$('#desctag').val($(this).length)
})})
</script>
You need to put it in a document.ready function so it executes when the DOM is ready.
$(document).ready(function() {
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length);
});
});
I want to create an external js-file, in which I can configure the copy of several elements in my html file. I'm using document.getElementById("id").innerHTML = "what ever"; to "inject" or "add" my copy to html elements that have a certain id.
This works out fine, however when I have more than one element with the same id in my html file, the html from my js-file is only added to the first element but the html from my js-file should be added to all elements with the same id
That's my html construct:
<html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<strong id="back-button"></strong>
</div>
....
<div>
<strong id="back-button"></strong>
</div>
</body>
</html>
And that's my JS file:
$(function() {
$(document).ready(function addcopy() {
/* global */
document.getElementById("back-button").innerHTML = "go back";
});
});
Any help or tip is much appreciated.
Thanks!
You could use class, because ids can be used only once.
<html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="back-button">
</div>
....
<div class="back-button">
</div>
</body>
</html>
And in javascript :
<script type="text/javascript">
$(document).ready(function addcopy() {
/* global */
$(".back-button").html("<strong>go back</strong>");
});
</script>
In js you can do it like this:
document.getElementsByClassName('message')[0].innerHTML = "Good afternoon:)!";
Then you can loop through all elements of this class.
id attribute should be unique, I know that in JQuery if you want to use multiple selector you can use class instead.
Or you can use name and the getElementsByName() function that will give you an array of elements in Javascript.
You have jQuery, why not use $('#back-button').html('go back') instead of the plain/native JS?
However, you have more than one button and IDs must be unique, so you cannot use an id for this. Use class="back-button" and the following jQuery code:
$('.back-button').html('go back');
Please use class instead of id for the HTML elements and use jquery to fill in the required text.
<div>
<strong class="back-button"></strong>
</div>
$('.back-button').text('go back'); // OR
$('.back-button').html('go back');
I have got one question, how to use javascript replace() in div tag? I tried it like that:
<html>
<body>
<div id="ahoj">ahoj</div>
<script type="text/javascript">
document.write(document.getElementById("ahoj").replace("ahoj","hola"));
</script>
</body>
</html>
...but it is not working.. Any ideas?
document.getElementById("ahoj") is an HTMLElement object. Use document.getElementById("ahoj").innerHTML
document.write(document.getElementById("ahoj").replace(/ahoj/g,"hola"));
Or if you don't want a new element:
document.getElementById("ahoj").innerHTML = document.getElementById("ahoj").innerHTML.replace(/ahoj/g,"hola");
Replace the string and set the innerHTML to the new string. Example
I think innerHTML is what you'll need to use.
document.write(document.getElementById("ahoj").innerHTML.replace("ahoj", "hola"));
<script type="text/javascript">
var el = document.getElementById("ahoj");
el.innerHTML = el.innerHTML.replace(/ahoj/g,”hola”);
</script>
The following jQuery example should put some text into the div, but it doesn't. I tried Firefox, Google Chrome and Internet Explorer.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
$(window).load(function() {
$('adiv').html('<p>hello world</p>');
alert('done');
});
</script>
</head>
<body>
<div id="adiv">
</div>
</body>
</html>
Sorry, this might be stupid, but I'm stuck.
change $('adiv').html('<p>hello world</p>');to
$('#adiv').html('<p>hello world</p>');
You're not actually selecting anything in your select function
Directly after your $( opening, you need to use a CSS3 valid selector. Just a string won't select anything unless it's a HTML element (table, div, h2)
You need to preface it with a . or a # to signal either a class or ID name.
$('adiv') should be $('#adiv').
Unlike Prototype, in jQuery you specify a CSS selector, not just a string that is implicitly inferred to be an ID. I find myself forgetting this from time to time.
As e-turhan already mentioned you need # in front of adiv in your $() otherwise this is not a id selector. Also it's always better to call these .load() events inside the .ready() jQuery event whose famous shortcut is $(function() { //execute when DOM is ready }); . In your case:
$(function(){
$(window).load(
function(){
$('#adiv').html('<p>hello world</p>');
}
);
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script> <script language="javascript"> $(window).load(function() { $('#adiv').html('<p>hello world</p>'); alert('done'); }); </script> </head> <body> <div id="adiv"> </div> </body> </html>
Paste this code instead ur query
It Will Work
Try $(document).ready(function()... instead of $(window).load(function()...