How do I convert this HTML button to Javascript?

Hello,
I am working on a WordPress website.

I have written an HTML sequence that creates a button that disappears when clicked and brings up a pop_up form for users to fill out:

<a href class="sg-popup-id-12368"><button onclick="style.display=('none')" style="width: 170px; height: 55px; background-color: black; position: relative; left: 100px; top: 386px;" type="button"></button></a>

I currently have this in the text editor of the pages I want; however, when I switch from text view to visual it discards the parts of the code that I need for the whole thing to work.

I need to move this to the backend of the site in the php files. I only want the button to appear on certain pages. I know that I can use if(window.location.href = ("example.com")){} to check if the current webpage is the one I want to run the function on, but after than Iā€™m not sure how to code the button inside the if statement so that it appears and work.
Any suggestions or ideas?

personally, I donā€™t like using inline css or javascript in html tags. It results in less compartmentalized code which is bad for readability and code maintainability but itā€™s definitely fine in some cases. (IMO this is not one of those cases.)

I suggest making a function in javascript that handles the button functionality. First add an ID attribute to the button in your html file: so that you can refer to that unique button in vanilla js. (just pure javascript. ) but this task ix even easier with jQuery if you know it.
use a class instead of id attribute if their are several buttons that you want to add the same functionality.
Then in your external css file or in between your style tags in the html file, create a css class ruleset to make whatever you want turn invisible:
styles.css:
.isInvisible{
display: none;
}
now in your javascript file
javascript.js:
// get button from html to javascript by ID and store to a var called button1
let button1 = document.getElementByID(ā€œbtnā€);
// add an event listener to the button1 variable that fires your function on a click event
button1.addEventListener(ā€œclickā€, function(){ }; ); //this uses an anonymous function that has no name because it wont be used anywhere else.
fill the function body with the code you want to execute.
//add the class to your button
button1.classList.add(ā€œisInvisibleā€); // note you do NOT include the dot operator (.) in the classList.add() argument.

Alternatively, if you still want to do it inline, consider creating the function in your javascript and then setting onclick to the function:
javascript.js:
function handleButton( ){
//do something
}
index.html:

it is also possible that your onclick=ā€œstyle.display=(ā€˜noneā€™)ā€ line just needs to be onclick=ā€œthis.style.display=(ā€˜noneā€™)ā€ so that you are referring to the button itself.

sorry if this is too basic or too complicated. This is my first code review so Iā€™m having trouble assessing your skill level. Disregard this completely if I seem to be below your skill level.

1 Like

Thank you! I normally donā€™t use inline css or javascript, but this was the one only way I could get it to work on my site. Iā€™m still a beginner when it comes to javascript and PHP and the explanation is great. Iā€™ll try this after Iā€™ve given the site a break, it crashed again earlier when I tried another technique to get this to work.