JavaScript

$(function(){
    const displayShortCosts = function(){
        $(".consultsup").show();
        $("#btconsultsup").hide();
    });
    
    if ($("#shortCosts").val()) {
        displayShortCosts();
    }
    else {
        $("#btconsultsup").click(displayShortCosts);
    }
});

 $("#btconsultsup").click(function () {
      if ($(this).val().toLowerCase() == "amend") {
	  $.each($('.consultsup'), function(i, item){
	  $(this).show();
	});
	$(this).val("Cancel");
    } else {
	  $.each($('.consultsup'), function(i, item){
	  $(this).hide();
	});
	$(this).val("Amend");
    }
  });

if ($("#shortCosts").val()) {

if ($("#amendconSupportContractCosts").val()) {

Member 15265438 wrote:

Please advise if the below codes are ok to do an autoplay audio function?

const playAudio = function(){
    const audio = document.querySelector("audio");
    audio.style.display = "block";
    audio.play();
};

const shouldPlayAudio = function(){
    const now = new Date();
    
    const h = now.getHours();
    if (h > 16) { return true; }
    if (h < 16) { return false; }
    
    const m = now.getMinutes();
    if (m > 25) { return true; }
    if (m < 25) { return false; }
    
    const s = now.getSeconds();
    return s >= 1;
};

let autoPlayTimer = null;

const playAtTime = function(){
    if (shouldPlayAudio()) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
        playAudio();
    }
};

autoPlayTimer = setInterval(playAtTime, 1000);

document.querySelectorAll(".Polaris-Button, .ant-pagination-next").forEach(btn => btn.click());

ClickPolaris();
ClickPagination();

ClickPolaris();
setTimeout(function() {ClickPolaris();}, 5000);

function ClickButtons(classname) {
  var buttons = document.getElementsByClassName(classname);
  for(var i = 0; i <= buttons.length; i++) { 
    buttons[i].click();
  }
}

ClickButtons('Polaris-Button');
setTimeout(function() {ClickButtons('ant-pagination-next');}, 5000);

function ClickButtons(classname) {
document.querySelectorAll(classname).forEach(btn => btn.click());
}

ClickButtons('.Polaris-Button');
setTimeout(function() {ClickButtons('.ant-pagination-next');}, 5000);

DerekT-P wrote:

Where there are multiple CSS selectors, in what order is the result list?

Selectors API Level 1[^]:

The querySelectorAll() ... must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order.

<input id="btn1" type="submit" class="ant-pagination-next">
<button id="btn2" class="Polaris-Button"></button>
<button id="btn3" class="ant-pagination-next"></button>
<button id="btn4" class="Polaris-Button ant-pagination-next"></button>

document.addEventListener("DOMContentLoaded",() => {

    const phoneInputs = document.getElementsByClassName('phoneNumber');
    for (let phoneInput of phoneInputs) {
        phoneInput.addEventListener('keydown', () => {
            formatPhoneNumber12(this.value)
        });
    }

});

document.addEventListener("DOMContentLoaded",() => {
    const phoneInputs = document.getElementsByClassName('form-control phoneNumber');
    for (let phoneInput of phoneInputs) {
        phoneInput.addEventListener('keydown', event => {
            event.target.value = formatPhoneNumber12(event.target.value);
        });
    }
});

function formatPhoneNumber12(value) {    
    if (!value) return value;    
    const phoneNumber = value.replace(/[^\d]/g, "");    
    const phoneNumberLength = phoneNumber.length;    
    if (phoneNumberLength < 4) return phoneNumber;    
    if (phoneNumberLength < 7) {
        return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3)}`;
    }    
    return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(
        3,
        6
    )}-${phoneNumber.slice(6, 9)}`;
}

document.addEventListener("keydown", (e) => {
    const el = e.target;
    if (el.classList.contains("phoneNumber")) {
        console.debug(el.id, el.value);
        el.value = formatPhoneNumber(el.value);
    }
});