How to execute JavaScript code when click Button in Webflow - javascript

I am newbie in Webflow, In Webflow project I want to get button by id and execute some Javascript code when I click this button.
The code I write:
<script>
document.addEventListener('DOMContentLoaded', () => {
let btn = document.getElementById('myButtonId');
btn.addEventListener('click', () => {
// handle the click event
console.log('clicked');
alert("Hello");
});
});
</script>

You'll either need to move the code to the Page Footer,
or wrap the code in the Webflow's recommended "Webflow ready function":
var Webflow = Webflow || {};
Webflow.push(function() {
// Your code goes here
document.addEventListener('DOMContentLoaded', () => {
let btn = document.getElementById('myButtonId');
btn.addEventListener('click', () => {
...
});
});
}); // End Webflow ready function

Java script you can call the function any name you want
<script>
function yourFunctionName() {
alert("hello")
};
</script>
HTML
<body>
<button id="myButtonId" onclick="yourFunctionName ()">click here</button>
</body>

Related

How to use hide() in Javascript

I am trying to hide a div the id of which I stored in a variable named 'post_container_id'. My code is:
document.addEventListener('DOMContentLoaded', function() {
// Add event listener to following button
document.querySelectorAll('.post-edit').forEach(item => {
var itemid = item.getAttribute('id').slice(5,)
item.addEventListener('click', () => edit_post(itemid));
})
});
function edit_post(itemid) {
var post_container_id = `#post-container-${itemid}`;
(function(){
$(post_container_id).hide(1000);
});
};
This does not hide the div. It does not throw any error either. The function does get triggered (I checked it by logging to console). What am I doing wrong?
There is a mistake here:
(function(){
$(post_container_id).hide(1000);
});
You are just declaring the function, you should also call it:
(function(){
$(post_container_id).hide(1000);
})();
Also, the callback is useless in this case, you can just solve it as:
function edit_post(itemid) {
var post_container_id = `#post-container-${itemid}`;
$(post_container_id).hide(1000);
};
$("#hide").click(function(){
edit_post(1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="post-container-1">secret</div>
<button id="hide">Click to hide</button>
You can also use vanilla JavaScript to hide/show the element directly by changing the style display property. As follows
function edit_post(itemid) {
const post_container_id = document.querySelectorAll(`#post-container-${itemid}`);
post_container_id.style.display = 'none';
};
Without jQuery,
document.getElementById(post_container_id).style.display = "none"

button not clicking not clicking dynamically - javascript

I am attempting to click a button dynamically using javascript to call a js function, when I launch the page, the javascript function is never called by the button to be clicked dynamically. here is my snippet
<button id="deSubmit" type="submit" >
To be clicked automatically
</button>
<script type="text/javascript">
document.getElementById("deSubmit").click();
</script>
Here is the js function I want to be called dynamically
$("#deSubmit").click(function () {
$(function () {
url_redirect({
url: "${url}",
method: "post"
});
});
........
Please what could be wrong
Call it in document.ready
$("#deSubmit").click(function () {
console.log("teste")
/*$(function () {
url_redirect({
url: "${url}",
method: "post"
});
});*/
});
$( document ).ready(function() {
document.getElementById("deSubmit").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="deSubmit" type="submit" >To be clicked automatically</button>
Attach click event inside document.ready. Also $(function () { this wrapper is not required
$(document).ready(function() {
document.getElementById("deSubmit").click();
})
$("#deSubmit").click(function() {
console.log('test')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="deSubmit" type="submit">To be clicked automatically</button>
I don't know why you want to click a button, you can write this function on load of script as well.
You need to enclose your code inside the document ready function to make sure your document loads before any JavaScript code is executed.
And for simplicity purpose, I have invoked click event using JQuery onlu.
$(document).ready(function() {
$("#deSubmit").click(function() {
/* url_redirect({
url: "${url}",
method: "post"
});
*/
alert('function called');
});
$('#deSubmit').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="deSubmit" type="submit">
To be clicked automatically
</button>
Don't complicate with jQuery and Javascript.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const btn = document.getElementById("deSubmit");
btn.addEventListener("click", function() {
alert("here2")
});
btn.click();
});
</script>
Use above code this will work.. just put your code in place of the alert.

how to call a jquery click function using javascript?

I wand to call a jquery click function using JavaScript
<input type='button' class="button" value='+Add' id='addImage'>
when i click this button the following function will run
$("#addImage").click(function () {
//my code.....
}
but i need to call this function using another JavaScript function like fn_name()
You can use trigger and the name of the event, like so (the example below uses a self-executing function for simplicity):
$("#addImage").click(function() {
alert('Clicked')
});
(function(){
$("#addImage").trigger('click')
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' class="button" value='+Add' id='addImage'>
use trigger
$("#addImage").trigger("click")
you have this ugly way too, but not recommended:
https://jsfiddle.net/96oxhwsf/
function fn_name() {
$("#addImage").click(function() {
alert('test')
});
}
fn_name()
beatiful way:
function fn_name(elID) {
let btn = document.getElementById(elID);
btn.addEventListener('click', function() {
alert('Test');
}, false)
}
// still need call the function
fn_name('addImage');
even better:
var addImg = () => {
let btnAdd = document.getElementById('addImage')
btnAdd.addEventListener('click', () => {
alert('test')
}, false)
}
declare function
bind click event
call function
//declare
function test(){
//my code.....
}
function callTest(){
// call function
test();
}
function callAClick(){
//trigger
$("#addImage").trigger('click')
}
// bind click
$("#addImage").click(test);

How to initialize a plugin from another javascript file

I have the following fiddle. On click of button 'scroll', is it possible to call the scrollTest function inside the plugin? Right now I am calling the whole test() again and hence it is creating a new test object each time I click on scroll button.
My Code [ fiddle demo ]
(function ($, win, doc) {
'use strict';
$.fn.test = Plugin;
$.fn.test.Constructor = Test;
function Plugin() {
return this.each(function () {
new Test(this);
});
}
// TREE CLASS DEFINITION
// =====================
function Test(el) {
var publ = this,
priv = {};
console.log("start");
$('.test_button').click(function(){
console.log("clicked");
publ.scrollTest
})
publ.scrollTest = function () {
console.log("in scrolltest");
};
publ.bindEvents= function () {
console.log("in bind");
};
publ.fileter= function () {
console.log("in filter");
};
}
}(jQuery, this, this.document));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Hello</h2>
<button class="test_button">Click me</button>
<button class="test_button2" onclick="$('h2').test()">scroll</button>
</body>
<script>
$('h2').test();
</script>
You need to wrap the use of it inside a $(document).ready(); block to ensure the script has loaded before starting to use it.
If you wish to have your code only run onClick for elements with the class test_button2 you can use :
// include this only ONCE on your page.
$(document).ready(function() {
$(this).test(true); // sends the flag to initialize the click() event once
$('.test_button2').click(function(){
$(this).test(); // action on every .test_button2 click();
});
});
.. and replace ..
<button class="test_button2" onclick="$('h2').test()">scroll</button>
.. with ..
<button class="test_button2">scroll</button>
See the code below for the fix in action :
(function ($, win, doc) {
'use strict';
$.fn.test = Plugin;
var publ, priv;
function Plugin(initialize) {
if(initialize === true) {
console.log("start");
$('.test_button').click(function(){
console.log("clicked");
});
}
console.log("in scrolltest");
}
}(jQuery, this, this.document));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Hello</h2>
<button class="test_button">Click me</button>
<!-- onClick is handled by jQuery's .click() method -->
<button class="test_button2">scroll</button>
</body>
<script>
// this code should only be placed once on your page.
var $test;
$(document).ready(function() {
$test = $(this).test(true);
$('.test_button2').click(function(){
$(this).test();
});
});
</script>

run getelementbyid in function html

so in my javascript file i have this
document.getElementById('bodyresize').onclick = function()
so that when i press a button with this code it starts that function:
<button id="bodyresize">Click Me test</button>
but
now i need another button end when i press that a function starts in my html script:
function resizeanshow()
{
showhide();
}
in that function first showhide() does its thing
but now the question:
what is the code that i can run bodyresize also in that same function
Do:
document.getElementById('bodyresize').onclick = function() {
showhide();
//do further coding for resizing here
console.log('resize method');//logs in the console after showhide();
};

Categories

Resources