obiekt i funkcja

Czesc,
Jak zrobić aby nie robic 2 roznych funkcji tylko dac jedna? Tyle ze problem stawia nazwa div'a, jednakze zmienna jest taka sama (to glownie od niej zalezy co sie pojawi).
Prosze o pomoc.

function Auta(nazwa, model, moc) {
	this.nazwa= nazwa;
	this.model= model;
	this.moc= moc;
	
	this.modele= function() {
		if(this.model> 15) {
			return '***';
		}
		else if(this.model> 10) {
			return '**';
		}
		else {
			return '*';
		}
	};
	
	this.dod = function() {
		let extra2 = '<font color=yellow> extra2</font>';
		let extra1 = '<font color=yellow> extra1</font>';
		
		if(this.model> 15) {
			return this.nazwa+= extra2;
		}
		else if(this.model> 10) {
			return this.nazwa+= extra1;
		}
		else {
			return this.nazwa;
		}
	}
}

var audi= new Auta('Audi', 16, 9);

function audii() {
	document.getElementById('audidod').innerHTML = audi.dod();
	document.getElementById('audimodel').textContent = audi.model;
	document.getElementById('audimoc').textContent = audi.moc;
	document.getElementById('audimodele').textContent = audi.modele();
}


var bmw= new Auta('BMW', 13, 9);

function bmww() {
	document.getElementById('bmwdod').innerHTML = bmw.dod();
	document.getElementById('bmwmodel').textContent = bmw.model;
	document.getElementById('bmwmoc').textContent = bmw.moc;
	document.getElementById('bmwmodele').textContent = bmw.modele();
}

audii();
bmww();

<div id="audi_">
	<h1><span id="audidod"></span></h1>
	Model <span id="audimodel"></span><br>
	Moc: <span id="audimoc"></span><br>
	Modele: <span id="audimodele"></span><br>
</div>


<div id="bmw_">
	<h1><span id="bmwdod"></span></h1>
	Model: <span id="bmwmodel"></span><br>
	Moc: <span id="bmwmoc"></span><br>
	Modele: <span id="bmwmodele"></span><br>
</div>

Hej,
tak na pierwszy rzut oka, dodaj metodę do objektu Auta, która będzie to robić co robisz dla Audi i dla BMW :)

Tak jak @hurgadion powiedział plus jeszcze bym Ci radzil zaznajomic sie z metoda .map(). Ta metoda umozliwi pozbycie sie tylu document.getElementById, przyklad: https://jsfiddle.net/h1zw4bc7/34/

Jak dla mnie to po prostu potrzebujesz dodać parametr do funkcji, a nawet dwa parametry:

• auto do dodania
• element DOM będący elementem-rodzicem do renderingu
  coś takiego:

function renderAuto(auto, el) {
     el.querySelector('dod').innerHTML = auto.dod();
     el.querySelector('model').textContent = auto.model;
     el.querySelector('moc').textContent = auto.moc;
     el.querySelector('modele').textContent = auto.modele();
}

renderAuto(audi, document.getElementById('bmw'));
renderAuto(bmw, document.getElementById('audi'));

poza tym stylistyka leży. Dlaczego model jest zmienną, a modele jest funkcją? To mylące, potem sam nie będziesz wiedział, co jest zmienną a co funkcją. Powinno być to spójne. No i w ogóle po co ci konstruktor w tym przypadku i jakieś metody jeszcze? Funkcja Auta po prostu mogłaby już wszystko liczyć od razu i zwracać czysty obiekt z suchymi danymi (pod warunkiem, że obiekt nie będzie się zmieniał, będzie "niemutowalny")

hurgadion napisał(a):

Hej,
tak na pierwszy rzut oka, dodaj metodę do objektu Auta, która będzie to robić co robisz dla Audi i dla BMW :)

Jak na razie jest tak:

this.audii = function() {
		document.getElementById('audidod').innerHTML = audi.dod();
		document.getElementById('audimodel').textContent = audi.model;
		document.getElementById('audimoc').textContent = audi.moc;
		document.getElementById('audimodele').textContent = audi.modele();
	}
	
	this.bmww = function() {
		document.getElementById('bmwdod').innerHTML = bmw.dod();
		document.getElementById('bmwmodel').textContent = bmw.model;
		document.getElementById('bmwmoc').textContent = bmw.moc;
		document.getElementById('bmwmodele').textContent = bmw.modele();
	}

audi.audii();
bmw.bmww();

gohangbr napisał(a):

hurgadion napisał(a):

Hej,
tak na pierwszy rzut oka, dodaj metodę do objektu Auta, która będzie to robić co robisz dla Audi i dla BMW :)

Jak na razie jest tak:

Kopiuj

this.audii = function() {
		document.getElementById('audidod').innerHTML = audi.dod();
		document.getElementById('audimodel').textContent = audi.model;
		document.getElementById('audimoc').textContent = audi.moc;
		document.getElementById('audimodele').textContent = audi.modele();
	}
	
	this.bmww = function() {
		document.getElementById('bmwdod').innerHTML = bmw.dod();
		document.getElementById('bmwmodel').textContent = bmw.model;
		document.getElementById('bmwmoc').textContent = bmw.moc;
		document.getElementById('bmwmodele').textContent = bmw.modele();
	}

audi.audii();
bmw.bmww();

Nie, te metody robia dokladnie to samo co funkcje ktorych chciales sie pozbyc, chodzilo raczej o taka metode:

this.injectData = function() {
    document.getElementById(`${this.nazwa}dod`).innerHTML = this.dod();
    document.getElementById(`${this.nazwa}model`)).textContent = this.model;
    document.getElementById(`${this.nazwa}moc`)).textContent = this.moc;
    document.getElementById(`${this.nazwa}modele`)).textContent = this.modele();
}

getElementById bedzie sie odnosic do nazwy samochodu tzn. this.nazwa = BMW to getElementById("BMWdod")

@Edit: za bardzo komplikujesz tymi konstruktorami. Duzo latwiej stworzyc jakas tablice z pojazdami:

var cars = [
{
nazwa = "BMW",
model = "F31"
},
{
nazwa = "Audi",
model = "A4"
}
]

i napisac funkcje ktora wrzuci to do html. Zredukujesz kod o polowe

Karol Szymanowski napisał(a):

this.injectData = function() {
document.getElementById(${this.constructor.nazwa}dod).innerHTML = this.dod();
document.getElementById(${this.nazwa}model).textContent = this.model;
document.getElementById(${this.nazwa}moc).textContent = this.moc;
document.getElementById(${this.nazwa}modele).textContent = this.modele();
}

getElementByIdbedzie sie odnosic do nazwy samochodu tzn.this.nazwa = BMWtogetElementById("BMWdod")

A po co jest nazwa constructor?
Reszty kodu nic nie ruszam, jedynie co to jeszcze wywoluje:
var audii = new Auta('Audi', 16, 9);
audii.injectData();
i nie działa :(

LukeJL napisał(a):

Jak dla mnie to po prostu potrzebujesz dodać parametr do funkcji, a nawet dwa parametry:

• auto do dodania
• element DOM będący elementem-rodzicem do renderingu
  coś takiego:

Kopiuj

function renderAuto(auto, el) {
     el.querySelector('dod').innerHTML = auto.dod();
     el.querySelector('model').textContent = auto.model;
     el.querySelector('moc').textContent = auto.moc;
     el.querySelector('modele').textContent = auto.modele();
}

renderAuto(audi, document.getElementById('bmw'));
renderAuto(bmw, document.getElementById('audi'));

poza tym stylistyka leży. Dlaczego model jest zmienną, a modele jest funkcją? To mylące, potem sam nie będziesz wiedział, co jest zmienną a co funkcją. Powinno być to spójne. No i w ogóle po co ci konstruktor w tym przypadku i jakieś metody jeszcze? Funkcja Auta po prostu mogłaby już wszystko liczyć od razu i zwracać czysty obiekt z suchymi danymi (pod warunkiem, że obiekt nie będzie się zmieniał, będzie "niemutowalny")

czyli:
dodaje do function Auta:

this.renderAuto = function(auto, el) {
     el.querySelector('dod').innerHTML = auto.dod();
     el.querySelector('model').textContent = auto.model;
     el.querySelector('moc').textContent = auto.moc;
     el.querySelector('modele').textContent = auto.modele();
};

a potem wywoluje:

var audii = new Auta('Audi', 16, 9);
var bmww = new Auta('BMW', 13, 9);

bmww.renderAuto(bmw, document.getElementById('bmw'));
audii.renderAuto(audi, document.getElementById('audi'));

oraz poprawiam kod na:

<div id="audi">
	<h1><span id="dod"></span></h1>
	Model <span id="model"></span><br>
	Moc: <span id="moc"></span><br>
	Modele: <span id="modele"></span><br>
</div>

dobrze mysle?

Wiem wiem, trochę zamotałem. Chyba sobie strasznie utrudniam. Faktycznie stylistyka leży, będzie więcej kodu to się zamotam...
Dokończmy może to a potem ogarnę sobie w tablicy :)

czyli:
dodaje do function Auta:

Kopiuj

this.renderAuto = function(auto, el) {
   el.querySelector('dod').innerHTML = auto.dod();
   el.querySelector('model').textContent = auto.model;
    el.querySelector('moc').textContent = auto.moc;
    el.querySelector('modele').textContent = auto.modele();
};

Po co dodajesz tę funkcję do obiektu tworzonego przez funkcję Auta? Po prostu możesz zrobić funkcję renderAuto:

function renderAuto(auto, el) {
     el.querySelector('dod').innerHTML = auto.dod();
     el.querySelector('model').textContent = auto.model;
     el.querySelector('moc').textContent = auto.moc;
     el.querySelector('modele').textContent = auto.modele();
}

ew. mógłbyś faktycznie ją doczepić do obiektu tworzonego przez funkcję Auta, i wtedy już niepotrzebny byłby dodatkowy parametr, ponieważ this byłoby autem.

this.renderAuto = function(el) {
    el.querySelector('dod').innerHTML = this.dod();
    el.querySelector('model').textContent = this.model;
    el.querySelector('moc').textContent = this.moc;
     el.querySelector('modele').textContent = this.modele();
 };

Ale to kwestia podejścia. Ja bym wolał zrobić jednak osobną funkcję (i nie doczepiać jej nigdzie), żeby nie mieszać w jednym obiekcie kodu odpowiedzialnego za dostarczanie danych z kodem odpowiedzialnym za wyświetlanie elementu na ekranie (ponieważ mógłbym chcieć np. użyć te same dane i wyświetlić je kilka razy, za każdym razem w różny sposób).

Dodaje funkcje na zewnatrz a potem wywoluje:

var audi = new Auta('audi', 16, 9); renderAuto(audi, document.getElementById('audi')); 

<div id="audi"> 
<h1><span id="dod"></span></h1>
 Model: <span id="model"></span><br> 
Moc: <span id="moc"></span><br> 
Modele: <span id="modele"></span><br> 
</div> 

cos zle robie ...

Aha, tam się pomyliłem w poprzednim kodzie, więc jak weźmiesz to, co napisałem bez poprawek to nie zadziała.

 el.querySelector('dod').innerHTML = auto.dod();

machnąłem się i napisałem dod, ale querySelector przyjmuje selektor podobny do tego w CSS, a nie id https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

i żeby znaleźć obiekt o danym id należałoby zrobić .querySelector('#dod')
Tylko, że id musi być unikalne w danym dokumencie, więc lepiej byłoby operować na klasach:

<span class="dod"></span>

a potem wyszukać to tak:

 el.querySelector('.dod')