We Keep Coding

How to click on a specific button when multiple are present on a webpage

There are two buttons on a webpage called "Place Order". The first button html code looks like this :
<button class="mod-ncss-btn ncss-btn-accent fs14-sm ncss-brand pt3-sm prl5-sm pb3-sm pt2-lg pb2-lg d-sm-b d-md-ib u-uppercase u-rounded mod-button-width">Place Order</button>
The second button html code looks like this:
<button class="d-lg-ib d-sm-h fs14-sm ncss-brand ncss-btn-accent pb2-lg pb3-sm prl5-sm pt2-lg pt3-sm u-uppercase">Place Order</button>
I am using Playwright on Javascript to try to click on the second button but can not get it to succeed so far. Both the buttons have dynamically changing classes so I am using this line to find the button and click on it:
await page.click('//button[contains(text(),"Place Order")]);
The problem I am having is that since both of these buttons are present on the webpage at the same time, I am clicking the first "Place Order" button. I am trying to click on the second "Place Order" button but have not succeeded since my code clicks on the first. Can someone show me how I can click on the second "Place Order" button instead of clicking the first? I am still new to Playwright and constantly learning everyday. Thanks in advance

The main idea here is that you can use multiple selectors to select elements on your page. I decided to assign ids to the buttons for the most uniqueness, because the classes you provided were too many and most of them aren't unique
const buttonOne = document.querySelector('[data-button=one]');
const buttonTwo = document.querySelector('[data-button=two]');
buttonOne.addEventListener('click', e => alert(e.target.innerText));
buttonTwo.addEventListener('click', e => alert(e.target.innerText));
buttonOne.click();
buttonTwo.click();
<button data-button="one">Button One</button>
<button data-button="two">Button Two</button>

Disabling a button via JS if a specific element ID appears on page

I am trying to use JS to change an add to cart button to be disabled if our inventory level (displayed on the front end in a <span>) is "out of stock". This JS is already set up on our site for changing button behaviour for variants (code at the bottom of the post) and so if I can integrate an additional conditional rule using our inventory <span> that would be amazing.
Here's the HTML for when the out of stock message appears:
<span class="LocationNoStock">Currently Sold Out</span>
I honestly have almost zero experience with JS so all I know is that I can look for elements by class name:
(document.getElementsByClassName("LocationNoStock")
Basically I want to add logic that dictates:
if class 'LocationNoStock' exists then disable 'add-to-cart' button
Any help that can be offered would be much appreciated! If it helps, our current JS for modifying the add-to-cart button is as follows - if an additional rule to search for the <span> could be inserted and mimic the behaviour that would be amazing!
updateCartButton: function(evt) {
var variant = evt.variant;
if (variant) {
if (variant.available) {
// Available, enable the submit button and change text
$(selectors.addToCart, this.$container).removeClass(classes.disabled).prop('disabled', false);
$(selectors.addToCartText, this.$container).html(theme.strings.addToCart);
} else {
// Sold out, disable the submit button and change text
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.soldOut);
}
} else {
// The variant doesn't exist, disable submit button
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.unavailable);
}
},

Your using jquery $(...) so you could do the following, look for .LocationNoStock if it's found then disable the .add-to-cart button.
if ($('.LocationNoStock').length) $('.add-to-cart').attr('disabled', 'disabled')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="LocationNoStock">Currently Sold Out</span>
<button type="button" class="add-to-cart">Add to Cart</button>

To disable buttonin javascript on load, can be done by setting attribute of the element
Example :
setAttribute("style","color:red")
In your case you are fetching element using class "add-to-cart" which gives htmlcollection so using index you can access the button element and then using setAttribute function of javascript, can set particular properties.
Try this:
$(document).ready(function(){
if (document.getElementsByClassName("LocationNoStock") != null){
var element = document.getElementsByClassName("add-to-cart");
element[0].setAttribute("disabled", "");
}
});

javascript --- get a new data everytime user press the button and cancel the previous one

everytime a user press the button I want to overwrite on the <h1> to whatever the user insert(in this case will always be a date), instead of keep adding child on the DOM, can someone help me? here's the code:
const header = document.createElement("h1");
header.classList.add("star-sign");
div.appendChild(header);
If ('statement'){header.innerHTML = 'execute'}

You can set the textContent property of your h1 when the button is clicked. See the example below.
document.querySelector('#button').addEventListener('click', () => {
document.querySelector('#date_heading').textContent = document.querySelector('#date_input').value;
});
<h1 id="date_heading">Date</h1>
<input id="date_input" type="date">
<button id="button">Submit</button>

Ciao, get the h1 element by his id and set it when user presses the button. For example if you want to change innerHTML:
document.getElementById("H1_element_Id").innerHTML = "your date here";

Buttons with dynamic content

I have buttons with labels that change depending on the topic that gets loaded. When clicked, the button loads new data to a chart. This works well on span elements but it doesn't work when I wrap the span in a button.
Example:
<button type = "button" class = "btn btn-default"><span id="cat1"></span></button>
Labels are set with :
click: function (e) {
document.getElementById('cat1').innerHTML = 'something'
};
Data is bound on click with:
$("#cat1").click(function() {
// do stuff
});
something gets lost when I add the button for the span. I have tried to replace span with an anchor but it doesn't work either.

Did you try?
<button type="button" class="btn btn-default" id="cat1"></button>

How you are using jQuery, you can try a more simple form.
Try it:
$('#cat1').click(function () {
$(this).html('something');
});
Or if the set value is out of the event, you cant try it:
$('#cat1').html('something');

You can update the text in span when button is clicked using following code
$('#btnClick #cat1').text("something");
In the above I gave a id for button as btnClick.
You can achieve the functionality without using span as well. For that you need to specify button as
<button id="btnClick">Button</button>
To change text of button, the code which need to be in click event will be
$('#btnClick').text("change")

When a span is nested inside a button, every time you click on it, the button click is fired. but the span click is not fired
based on your html, it looks like you are using bootstrap, you can do something like the following
<div class="btn btn-default">
<span id="cat1"></span>
</div>
I have a working example in the fiddle.
http://jsfiddle.net/pparas/dv3amy7k/1/

Disable all buttons on page

I have an MVC view with a number of buttons on it (each item in a basket renders 2 buttons)...
<button class="pbbg" id="ProductMinus_161637" type="button">-</button>
<button class="pbbg" id="ProductPlus_161637" type="button">+</button>
(they both have an onclick event)
When either of these buttons are pressed I want to disable all the buttons for every product until the basket has finished updating.
The click event calls a JavaScript function which in turn makes an Ajax call. Following this post the first thing I try to do is disable all the buttons.....
$("input[type=button]").attr("disabled", "disabled");
Then after the Ajax call returns reenable them....
$("input[type=button]").removeAttr("disabled");
I am getting no errors but the buttons are not disabled.
Where I am going wrong?

Your selector is wrong. instead of input.. selector you should use :button pseudo-selector.
You can use :button selector to select all the buttons.
$(':button').prop('disabled', true); // Disable all the buttons
To enable all the buttons:
$(':button').prop('disabled', false); // Enable all the button
EDIT
If you want to disable only the buttons whose id starts with Product use:
$('button[id^="Product"]')

Probably because you're not using the input tag, you're using the straight button tag. Try $("button").attr("disabled", "disable") instead.

You need to use button selector. Try prop like this
$('button').prop('disabled', true);

If anybody is looking for a vanilla javascript solution:
const buttons = document.getElementsByTagName("button");
for (const button of buttons) {
button.disabled = true;
}

if you want try this .
const buttons = document.getElementById("button");
buttons.setAttribute('disabled', true);