/    Sign up×
Community /Pin to ProfileBookmark

Javascript i wordpress

Hi,
I want to register a button click to generate a js script to do something. How do i do?
Best regards

/Ashley

to post a comment

16 Comments(s)

Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — Sempervivum ang clue
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — I'm stuck
Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — Hi Ashley,

not sure what you mean by "generate a js script to do something", however adding an event listener to a button is easy:
``<i>
</i>&lt;button id="my-button"&gt;Click!&lt;/button&gt;<i>
</i>
`</CODE>
js
<CODE>
`<i>
</i>document.getElementById('my-button').addEventListener('click', event =&gt; {
// button was clicked, do anything you like here
});<i>
</i>
``
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — Hi,

I have this js file

function display() {

document.getElementById("myID").style.fontFamily = "verdana,sans-serif";

document.getElementById("myID").style.fontSize = "smaller";

}

function display1() {

document.getElementById("myID1").style.fontFamily = "verdana,sans-serif";

document.getElementById("myID1").style.fontSize = "x-large";

}

function getRandomImage() {

//declare an array to store the images

var randomImage = new Array();

//insert the URL of images in array
randomImage[0] =
"https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[1] =
"http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";
randomImage[2] =
"https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[3] =
"https://images.unsplash.com/photo-1543877087-ebf71fde2be1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
randomImage[4] =
"https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg";
randomImage[5] =
"https://images.unsplash.com/photo-1501265976582-c1e1b0bbaf63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";

//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random() * randomImage.length);

//return the images generated by a random number
// There is no element document.canvas in your document:
// document.canvas.src = '<img src="' + randomImage[number] + '" />';
// assign url of random image to src attribute of img tag inside the figure tag:
document.querySelector('figure.item4 img').src = randomImage[number];

}

let timer = null;

``
---------------------------------------------


On the page i have a button called generate pics and when i press i want to active the above js-file. How to do?
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — I want to save the javascript in a file and call it from the main page (biutton page).
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — pls help
Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — Simply call the function by the event listener:
``<i>
</i>document.getElementById('my-button').addEventListener('click', event =&gt; {
// button was clicked, do anything you like here
getRandomImage();
});<i>
</i>
``
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — I put the JavaScript file as a header script but where do I write this listener?
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — How do I connect the button name to the js script
Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — Place the javascript at the bottom of the body, right before the closing `&lt;/body&gt;`. The reason is that the button has to be defined before the listener is added.
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — I mean I Wordpress
Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — Sorry, I have no clue about wordpress and cannot advice.
Copy linkTweet thisAlerts:
@Ashley128authorMar 09.2022 — Do you know someone
Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — Unfortunately not.
Copy linkTweet thisAlerts:
@sibertMar 09.2022 — https://sv.wordpress.org/support/forums/ ?
×

Success!

Help @Ashley128 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...