I'm using jQuery and I want to convert some methods to native JavaScript code.
In jQuery we are using like
$("div").toggle()
Is it possible to convert to JavaScript like
document.getElementById("id").callfunction();
I'm using jQuery and I want to convert some methods to native JavaScript code.
In jQuery we are using like
$("div").toggle()
Is it possible to convert to JavaScript like
document.getElementById("id").callfunction();
-
1
No. Not really. But you can write:
myFunctionThatToggles(getElementById("id")). Consult the jQuery source if you're curious what all it does. – user2864740 Commented Nov 22, 2013 at 6:34 - Another "i want to use jquery without using jquery" fail. – TigOldBitties Commented Nov 22, 2013 at 7:13
- @TigOldBitties Not failed. This is a valid question. See my answer. – Rakesh Juyal Commented Nov 22, 2013 at 7:53
-
@user2864740 OP was asking if he can execute the method in
getElementById("id")itself. I hope he already knew what you suggested. – Rakesh Juyal Commented Nov 22, 2013 at 7:54 -
1
@TigOldBitties It's always good to know how things are done. He said he is already using
jQuery, he just wants to know how he can do the same in raw javascript. Then it's upto him how he utilizes this knowledge. – Rakesh Juyal Commented Nov 22, 2013 at 9:23
4 Answers
Reset to default 7Yes you can do that. If you are satisfied with the other answers, saying that you have to create new function, and you have to call that. Then go for it.
Otherwise, if you really want to follow the syntax, then it is fairly simple and doable. ( Infact that looks pretty )
This is how you can do it:
Element.prototype.toggle = function() {
if ( this.style.display == '' || this.style.display == 'block' ) {
alert ( "Changing display to NONE ");
this.style.display = 'none';
}else{
this.style.display = 'block';
alert ( "Changing display to BLOCK ");
}
}
Remember IE8 doesn't support Element Prototype, but Chrome, FF, Safari does.
Run it
- Open chrome console in this page.
- copy-paste above code, and run in console.
- Now execute this in console
document.getElementById('question-header').toggle()[ This will show/hide the question title in this page ]
Don't clearly understood what you want but if this helps :
function toggle_item(id){ // your div id
var this_item = document.getElementById(id);
if( this_item.style.display == 'block' ) {
this_item.style.display = 'none';
}
else {
this_item.style.display = 'block';
}
}
Html:-
<button onclick="toggleCheck('contentDiv')">Toggle</button>
<div ID="contentDiv" style="display:block;">This is content.</div>
Javascript: -
function toggleCheck(divId) {
var divId = document.getElementById(divId);
// Toggle
divId.style.display == "block" ? divId.style.display = "none" :
divId.style.display = "block";
}
Working Demo
Of cause yes. You need to implement a function callfunction. Then add this function as prototype function of the element . For details, please look at below sample code:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="test">Hello, world!</div>
<button onclick="test()">toggle</button>
<script>
var test = function() {
document.getElementById("test").callfunction();
};
var callfunction = function() {
if (this.style.display == "none") {
this.style.display = "block";
} else {
this.style.display = "none";
}
};
// set callfunction as prototype function of all elements
Element.prototype.callfunction = callfunction;
</script>
</body>
</html>
After testing, this can work in IE8, IE9, chrome and ff.