Converting "document.getElementById" into jQuery
The answer to your question (title) is to replace
document.getElementById('about').href = '#';
with
$('#about').attr('href','#');
I have no idea if this will actually help you solve your problem, though, since I really don't know what you are trying to do. Based on your comments and code sample, it appears that you are trying to do some sort of wizard, but I have no idea how it would actually work given what you've posted.
Update:
Maybe something like:
<a href="link.php?test=true" onclick="request(this)" target="_blank" class='request'></a>
<a id="step2" href="next.php">Step 2</a>
<script language="javascript">
$(function() {
var requests = 16;
$('#step2').click( function() {
alert('Not finished');
return false;
});
$('.request').click( function() {
var $this = $(this); // save jQuery reference to element clicked
// swap indicator image source
$this.find('img:first').attr('src','images/clear.gif');
// if the number of flipped indicators equals the number of requests
// remove the click handler from the step 2 link
// this removes the alert and allows the user to proceed
if ($('.request img[src="images/clear.gif"]').length == requests) {
$('#step2').unbind('click');
}
...do something with the href for this request via ajax???
// replace this handler with one that simply returns false
// and remove the href since we're done with this request
$(this).unbind('click').attr('href','#').click( function() { return false; } );
// stop the default action for the request
return false;
});
</script>
How can I convert a DOM element to a jQuery element?
var elm = document.createElement("div");
var jelm = $(elm);//convert to jQuery Element
var htmlElm = jelm[0];//convert to HTML Element
convert javascript change event to jquery
$('#thisfile').change(function(evt){
handleFileSelect(evt);
});
How to convert JavaScript to JQuery?
pure JS and Jquery can work together, your code always work with or without jquery, but if you want all codes in same format then.
function contantForm(){ let Username = $("#Username").val(); let Emailinput = $("#Email").val(); alert("Thank you " + Username) $("#Username").val(""); $("#Email").val(""); $("#Phone").val(""); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Converting JavaScript 'this' to jQuery '$(this)'
Converting DOM element to jQuery objectTo convert DOM element to jQuery object you do the following:
var jquery_object = jQuery(dom_element);
So, in your example it will be $(this)
or $(event.target)
- depending on whether you want current element or the element that actually fired the event (in your case they are the same, unless event will be fired by some descendant element).
To convert jQuery object to DOM element, you can simply treat jQuery
object as array or use its get()
method like that:
var dom_element = jquery_object[0];
or
var dom_element = jquery_object.get(0);
The above will return first object stored in the jQuery object - if there is only one, there should be no problems (if there are more, just change 0
into other index to get appropriate element, or just omit the argument for get()
to retrieve all the elements as array).
jQuery
Your code could look like this (if you insist on using hard-to-maintain event attributes):
<HTML>
<HEAD>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
function test(target) { alert(target.get(0).nodeName); }
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<ul>
<li onclick="test($(this))">This is fair</li>
<li onclick="test($(this))">No its not</li>
<li onclick="test($(this))">Why not</li>
<li onclick="test($(this))">Becoz...</li>
</ul> </DIV>
</BODY>
except in this case using jQuery is completely useless and you can just operate directly on DOM elements, converting them to jQuery when needed :)
Your solution changed to bind events outside<body>
Your code using jQuery for binding events in jQuery 1.7+ could look like this:
<HTML>
<HEAD>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(function(){
$('li').on('click', function(event){
alert(event.target.nodeName);
});
});
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<ul>
<li>This is fair</li>
<li>No its not</li>
<li>Why not</li>
<li>Becoz...</li>
</ul> </DIV>
</BODY>
See the above in action here: jsfiddle.net/tadeck/2PqPP/
Related Topics
How to Access External Json File Objects in Vue.Js App
React Router Not Working After the Page Refresh
How to Select All Textframes in Document, and Retrieve the Text in Adobe Indesign
How to Prevent User to Enter Specific Key Using JavaScript
Filter Array of Dates Between Two Dates
Html Input Type Number Thousand Separator
How to Open Specific Web Browsers Using Hyperlinks
Safari: Focus Event Doesn't Work on Button Element
How to Import the Following Function in Another File
Re-Render Same Component on Url Change in React
Typeerror: Router.Use() Requires Middleware Function But Got a Object
Javascript: Open Several Urls With One Button Click
Accessing Variables from Other Functions Without Using Global Variables
How to Access Session Variables and Set Them in JavaScript
Append Data to Json Array Issue
Redirect Another Page After Successful Form Submission
How Display Selected Item from Bootstrap 4 Drop-Down Item Menu