There was a need to rewrite the code written with jquery into js. I have little js code on my site and I see no reason to include a library such as jquery.
This works (Jquery):
$('#prime').click(function() {
myFuction();
});
function myFunction() {
$('.prime').toggleClass('fa-message');
$('.prime').toggleClass('fa-xmark');
}
This doesn't:
document.addEventListener('DOMContentLoaded',function(){
document.getElementById("prime").click(function() {
myFuction();
});
function myFunction() {
document.getElementByClassName("prime").classList.toggle("fa-message");
document.getElementByClassName("prime").classList.toggle("fa-xmark");
}
}
Why?
I tried to rewrite the code jquery to js and something didn't work out.
The way you add an onclick event to a DOM element in vanilla javascript is using the following syntax:
object.onclick = function() {myScript};
for for your case it would look like:
document.getElementById("prime").onclick = function() { myFuction(); };
Here is some supporting documentation to help:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
Related
I am running a function through a jupyter notebook. Due to some reasons the window.onload function does not seem to work.
For example (this is just an example, not the actual code I am working with - I know this is not best practice), lets say I have the following page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"/>
<script>
window.onload = function() {
// use some jquery function here
}
</script>
Is there a way to convert this into something like this using vanilla javascript:
<script>
get("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js").then(
// use some jquery function here
)
</script>
So I've been trying to do the following bit of code without jQuery:
$(".parent-class").contents().find(".child-class").css("color", "red");
I'm trying to edit the styles of an embedded Twitter feed and I could only do that by getting the module's child nodes using this snippet: $(".twitter-timeline").find(".timeline-Tweet-text").css("margin-bottom", "-10px"); for whatever reason. It is necessary that the pure JS code mimics this functionality.
My full js function is:
// Change the style of the tweets after the module loads.
window.addEventListener('load', function () {
$(".twitter-timeline").contents().find(".timeline-Tweet-text").css("margin-bottom", "-10px");
});
Thanks for taking the time to read.
You can try the following way:
document.querySelectorAll(".twitter-timeline .timeline-Tweet-text").forEach(function(el){
el.style.marginBottom = "-10px";
});
I´m having a normal JavaScript-function and want to use the Variable (myVar) also in my jQuery Code - is this possible? and how?:
<a onclick="showtitle(abctitle);" href="#">Testlink</a>
<script>
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
};
</script>
Firstly, don't mix DOM0 inline event handlers with jQuery. Separate your markup and your logic.
If you use a data- attribute you can put your variable's content in your HTML, and then extract that in the event handler:
<a id="test" data-foo="mytitle" href="#">Testlink</a>
and then:
$(document).ready(function() {
$('#test').on('click', function() {
alert($(this).data('foo'));
}
});
In this code the alert won't appear until the link is actually clicked on, of course.
I believe #Alnitak has a great answer. But if you are just looking to solve the question you asked, wrap abctitle in single quotes and make myTitle a global variable:
<a onclick="showtitle('abctitle 2');" href="#">Testlink</a>
<script>
myTitle = "abctitle";
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
});
</script>
Also, your document ready function was missing its closing parenthesis )
Working example here: http://jsfiddle.net/CbhxY/
UPDATE
Working example on jsfiddle did not work so well. Try this: http://jsbin.com/ohedab/1/
The JS Bin example also adds the alert call in the showtitle function.
you can do with this
function showtitle(abctitle){
alert(myTitle); //I would like to alert "abctitle"
}
A simple JavaScript onclick event is not working but I don't understand why, here is the code:
<button onclick="removeLol()">remove style</button>
function removeLol() {
alert("hello");
}
and here is a simple example: http://jsfiddle.net/YNQg6/1/
That's only because of the way how jsfiddle inserts the javascript.
Jsfiddle wraps your code into a function which limits the scope and protects the global namespace:
window.onload=function(){
function removeLol() {
alert("hello");
element.className = element.className.replace(" lol ", "");
}
}
If you tell jsfiddle to inject the code into the document body it works:
http://jsfiddle.net/YNQg6/13/
Or you could turn your "local" function in a global one:
window.removeLol = removeLol;
The code works just fine (just tried it on my server). Check your console for other errors that may be causing the script to not run
I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.
<script type="text/javascript">
$(document).ready(function() {
$("#front-background").hide();
$(window).load(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
});
</script>
This may also be because of how Drupal handles compatibility with other JavaScript libraries.
You can wrap your jQuery function in:
(function ($) {
//your existing code
})(jQuery);
or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().
See http://drupal.org/node/171213 for more details.
You dont need window load event if you are already using $(document).ready method. Try this.
$(document).ready(function() {
$("#front-background").hide();
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
I didn't see any onClick functionality there. This should work:
CSS:
#front-background {
display:none;
}
JQuery hover replacement. Fade in on hover, fadeout on leave
$(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
},function(){
$('#front-background').fadeOut(2000)
});
});