Можно ли вызвать функцию JS с параметрами для html документа?

Question

[rustam6548]

let Sanya = document.getElementById("sn");
let Vasya = document.getElementById("vs");
let Danya = document.getElementById("dn");

function changeColor(name) {
	this.name.style.backgroundColor = "black";
}

и вот на этом моменте можно ли сделать что-то наподобие этого, только правильно:Sanya.onmouseover = changeColor("Sanya");
я знаю, что надо без скобок писать в вызове функции, но если нужно с параметром, то как? Или мне этих функций штуки 3 сделать и всё?

Answer 1

[bingumd]

так может лучше задать этим элементам один класс, на пример black, и в js:

document.querySelectorAll('.black').forEach(el => {
    el.addEventListener('mouseover', () => el.style.backgroundColor = 'black')
})

или просто через css:

.black:hover {
    background-color: black;
}

Answer 2

[Егор Живагин]

Если не секрет, зачем вы пишите this.name, что это вообще ? Зачем вы передаёте в функцию аргумент name, но не обращаетесь к нему? Выглядит это очень странно)

Сделать так, как вы хотите, можно:

let Sanya = document.getElementById("sn");
let Vasya = document.getElementById("vs");
let Danya = document.getElementById("dn");

function changeColor(name) {
  return () => {
    this.name.style.backgroundColor = "black";
  }
}

Правда по-моему код с this.name всё равно не будет работать, но может я просто не понимаю, что вы хотите сделать

Если я понял правильно, рабочее решение -

function changeColor(event) {
  event.target.style.backgroundColor = "black";
}

// Можно и через "onmouseover", но, если коротко, лучше так:
document.getElementById("sn").addEventListener('mouseover', changeColor);
document.getElementById("vs").addEventListener('mouseover', changeColor);
document.getElementById("dn").addEventListener('mouseover', changeColor);