Reposition buttons using JavaScript

I attempted to modify the button that appears at the top of an HTML page.

<div class='play'>
    <input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" />
</div>
<div class='pause'>     
    <input id="pause" type="button" value="Pause" onclick="mode('pause');startSlideshow();" />
</div>

<style>
    .play{
        position: absolute;
        top:452px;
        left: 85px          
    }
    .pause{
        position: absolute;
        top:452px;
        left: 85px          
    }
</style>

Currently, the pause button is displaying in front of the play button. I tried moving the button and hiding it, but it didn't budge. Changing the position style of the pause button also had no effect.

else if(smode=="pause")
{
    var pau = document.getElementById('pause'); 
    pau.setAttribute('style', 'top:100px;left:150px;');
    document.getElementById("pause").style.visibility = "hidden";
}

Answer №1

With this code snippet, you can easily toggle between the play and pause buttons on your interface, ensuring only one is displayed at a time.

function switchButton(action) {
  
  console.log(action);
  if(action == 'play') {
    document.getElementById('play').style.display = "none";
    document.getElementById('pause').style.display = "block";
  }
  if(action == 'pause') {
    document.getElementById('play').style.display = "block";
    document.getElementById('pause').style.display = "none";
  }
}
<div class='play'>
    <input id="play" type="button" value="Play" onclick="switchButton('play');" />
</div>
<div class='pause'>     
    <input id="pause" style="display:none;" type="button" value="Pause" onclick="switchButton('pause');" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CoffeeScript's alert feature appears to be malfunctioning

After stumbling upon CoffeeScript in a blog post, I was excited to try it out. My first attempt at using it involved this code snippet: alert "Hello CoffeeScript!" Unfortunately, it didn't work as expected and produced the following error message: ...

What is the best way to access the inner html of every cell within a table row that I have selected?

I want to implement a feature on my website where users can click a "save" button on a specific row in a table and save the entire row's innerHtml onto another page as their favorite hiking trails. I've been trying to achieve this by adding clic ...

When using CSS border-width:1px, I notice that the borders aren't consistently thin

I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...

How can I display a badge in my app when it is running using React Native?

For the past week, I've been dealing with an issue. My question is how can I display a new message badge without having to click on the message room when running my app. The badge should only show up after clicking on the message room. I see the badg ...

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays: const history = [ { type: 'change', old: 1, new: 2 }, { type: 'change', old: 3, new: 4 }, ]; const contents = [ { id: 1, info: 'infor1' }, { id: 2, info: 'infor2' }, { id: ...

Is there a way to make my red div switch its background color from red to green when I press the swap button?

How can I make the red div change its background color to toggle between red and green when I click on the swap button in the following code? $(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready ...

Looking to optimize this code? I have three specific tags that require reselection within a given list

for (var i=0; i<vm.tags.length; i++) { if (selectedTags[0]) { if (vm.tags[i].term_id === selectedTags[0].term_id) { vm.tags[i].border1 = true; } } if (selectedTags[1]) { if (vm.tags[i].term_id === selecte ...

``It has come to our attention that ALT texts are not displaying properly on popular email clients such as Outlook,

Despite following all the email standards and attempting to style the ALT tag, most major email clients do not display the ALT text when images fail to load. Is there a workaround for this issue or does it primarily depend on the specific email engine bein ...

Before clicking the submit button, send field values using Ajax

Is it possible to send values using ajax before submitting form data with a submit button? I have the code below. It successfully reaches the success function, but I am unable to retrieve the posted data. Any ideas on how to solve this issue? Your help an ...

Having issues with incorporating a component into another component in VueJS

Having spent approximately 30 hours on diving into VueJS, I am encountering some difficulties when it comes to using a component within another component. Seeking assistance from someone knowledgeable in this area to provide me with some clarification. Pr ...

When attempting to execute a query in Node using oracledb, an error with the code 'npm ERR! errno 3221225477' occurred

Encountered the following error message in the command line: npm ERR! code ELIFECYCLE npm ERR! errno 3221225477 npm ERR! [email protected] start: `node ./bin/www` npm ERR! Exit status 3221225477 npm ERR! npm ERR! Failed at the [email protected] start sc ...

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I&a ...

Translucent overlay enhancing image contrast

Currently, I have a container with a background image that turns semi-transparent on hover. Below is the simplified version of my HTML: <div class="container"> <div class="overlay"></div> <img src="hi.jpg"> </div> This ...

Instant Pay Now Option for Your WordPress Website with PayFast Integration

I have encountered an interesting challenge that I would like some guidance on. My goal is to integrate a PayFast "Pay Now" button into a Wordpress.com blog, specifically within a sidebar text widget. The tricky part is that I need the customer to input th ...

Customizing Carousel Arrows in Angular with ng-bootstrap

I need help changing the position and icon of control arrows using Bootstrap. I've tried targeting "carousel-control-prev-icon" & "carousel-control-next-icon", but nothing seems to work. Any suggestions on how to properly solve this issue? Here is th ...

Remembering data in a lazy loaded AngularJs list

Encountering an issue with a lazy loaded list of books. Initially, 10 books are loaded and if the user scrolls down, the next 10 books are loaded. For example, if the user is on "page" 4 and clicks on the 35th book to view details, upon returning to the l ...

Building a promotional widget

I'm currently working on developing an ad widget that can be easily reused. I'm debating whether to use jQuery or stick with pure JavaScript for this project. What are your thoughts on the best approach for creating a versatile and efficient ad w ...

The value of the innermost dropdown in the AngularJS Cascading dropdown is not being retrieved when it is selected

CSS <div ng-controller="DynamicCtrl"> <h1>Dynamic - Focused</h1> <p>This method works well when data is constantly changing</p> <div> Category: <select id="category" ng-model="items" ng-options="category ...

Sort by user identifier

I'm having an issue trying to filter a list of posts and comments by userId. I've passed the userId params as postCreator and commentCreator, but something seems to be amiss. Can anyone help me identify what I might be doing wrong? // Defining ...

A guide to implementing accurate pagination in Vue.js 2

I'm encountering an issue while setting up pagination with Vue. My goal is to load new tasks from jsonplaceholder when the numbers on the buttons are clicked. I have managed to successfully load the first and second pages. I believe this is directly ...