Use querySelector to get select based on two conditions, one being a prefix-CodePudding

So I am trying to select a div based on two conditions, one being a prefix.

So if I have

<div ></div>
<div ></div>

I want to have

function getdelay (classname) {
    let delayselect = document.querySelector("*[class='" classname "'], *[class*='delay-']");
return delayselect;
}
getdelay("joe");

should return <div ></div>

Currently the way it is working is it is selecting OR not AND.

How can I fix this?

CodePudding user response：

Use an actual class selector (.) for the fixed class name part.

let delayselect = document.querySelector(`.${classname}[class*='delay-']`);

The backticks ("template literals") allow for simpler inclusion of expressions in strings.