I'm trying to add an event listener to each input so they fire and event (as testing, i'm trying to do an alert) when they focus out with nothing ("") inside but i'm stuck in this error
"Uncaught TypeError: undefined is not a function at Array.forEach ()"
const inputs = document.querySelectorAll(".data-inputs");
const arrayInputs = Array.from(inputs);
// input logic
arrayInputs.forEach(
addEventListener("focusout", (e) => {
if (e.target == "") {
alert("This field cannot be empty");
}
})
);.input-wrapper {
display: flex;
flex-direction: column;
}
.left {
display: flex;
flex-direction: inherit;
}
.right {
display: flex;
flex-direction: inherit;
}
.data-input {
margin-bottom: 1rem;<div class="input-wrapper">
<div class="left">
<input type="text" class="data-input url" placeholder="URL do site">
<input type="text" class="data-input source" placeholder="Fonte da campanha">
<input type="text" class="data-input type" placeholder="Tipo da campanha">
</div>
<div class="right">
<input type="text" class="data-input name" placeholder="Nome da campanha">
<input type="text" class="data-input term" placeholder="Termos da campanha">
<input type="text" class="data-input content" placeholder="Conteúdo da campanha">
</div>
</div>
<div class="send-data">
<input type="submit" class="button" id="generate-utm" value="Gerar UTM">
<button class="reset-button">refresh</button>
</div>