Javascript: objektin funktion arvon palautus ja tulostus

[Pasi80]

Moi.

Olisi ongelmana saada palautettua objektin funktion arvo niin, että sen saisi tulostettua myös HTML documenttiin?

Ohjelmassa olen luonut objektin, joka saa syötettyinä arvoina (kohdenumeron, osoitteen, postinumeron, hinta, pintaAla => x, y, z, a, b) sekä sille tulostaOlionTiedot: function() -return 'Kohdenumero: ' + this.kohdenumero ... Juuri tämän olion funktion tiedot haluaisin palauttaa?

Älkää kiinnittäkö huomiota sivun graafiseen julkiasuun

Liitteenä kuvat:
1. html_script = html script osuus
2. funktio_js = aliohjelma (objekti, jota yritän palauttaa ja tulostaa)
3. web_kuva_virhe = console.log(asuntoOlio.osoite);
4. web_kuva_virhe = console.log(asuntoOlio.tulostaOlionTiedot());

 

[Pasi80]

ja Koodit vielä kirjoitettuna:

<script>
function lisaaAsunto() {
let x = document.getElementById('kohdenumero').value;
let y = document.getElementById('osoite').value;
let z = document.getElementById('postinumero').value;
let a = document.getElementById('hinta').value;
let b = document.getElementById('pintaAla').value;

let asuntoOlio = new AsunnonTiedot(x, y, z, a, b);

console.log(asuntoOlio.osoite);
document.getElementById('tulostusAlue').innerHTML = asuntoOlio.osoite;
}

function etsiAsunto() {
}
function laskeNelioHinta() {
}

Ja omana tiedostona aliohjelma objektista:

function AsunnonTiedot(x, y, z, a, b) {

let asunto = {
kohdenumero: x,
osoite: y,
postinumero: z,
hinta: a,
pintaAla: b,
tulostaOlionTiedot: function() {
return 'kohdenumero: ' + this.kohdenumero + '<br/> osoite: ' + this.osoite + '<br/> postinumero: ' + this.postinumero + '<br/> Hinta: ' + this.hinta + '<br/>Pinta-ala ' + this.pintaAla;

}
}
}

 

[negge]

Moro,

Sä et palauta mitään tuosta AsunnonTiedot funktiosta.
Sulla on objektin konstruktorissa metodi, mut se ei tarkoita, et kun luot uuden objektin, et se palauttaisi sen automaattisesti.

En ota kantaa, et onko best practices mut jos lisäät return asunto tuohon AsunnonTiedot funktioon niin sit se palauttaa sen objektin, minkä loit ja sit tulostuu haluamasi tieto.

Jos taas kutsuisit document.getElementById('tulostusAlue').innerHTML =
asuntoOlio.tulostaOlionTiedot(); niin saisit sen uuden objektin kokonaan tulostettuna.

 

[Tup3x]

ja Koodit vielä kirjoitettuna:

<script>
function lisaaAsunto() {
let x = document.getElementById('kohdenumero').value;
let y = document.getElementById('osoite').value;
let z = document.getElementById('postinumero').value;
let a = document.getElementById('hinta').value;
let b = document.getElementById('pintaAla').value;

let asuntoOlio = new AsunnonTiedot(x, y, z, a, b);

console.log(asuntoOlio.osoite);
document.getElementById('tulostusAlue').innerHTML = asuntoOlio.osoite;
}

function etsiAsunto() {
}
function laskeNelioHinta() {
}

Ja omana tiedostona aliohjelma objektista:

function AsunnonTiedot(x, y, z, a, b) {

let asunto = {
kohdenumero: x,
osoite: y,
postinumero: z,
hinta: a,
pintaAla: b,
tulostaOlionTiedot: function() {
return 'kohdenumero: ' + this.kohdenumero + '<br/> osoite: ' + this.osoite + '<br/> postinumero: ' + this.postinumero + '<br/> Hinta: ' + this.hinta + '<br/>Pinta-ala ' + this.pintaAla;

}
}
}

Lähtisin viemään tähän suuntaa... Se syy miksi ei toimi, on että AsunnonTiedot ei palauta mitään (puhumattakaan objectista).

function haeAsunnonTiedot() {
  return {
    kohdenumero: document.getElementById('kohdenumero').value,
    osoite: document.getElementById('osoite').value,
    postinumero: document.getElementById('postinumero').value,
    hinta: document.getElementById('hinta').value,
    pintaAla: bdocument.getElementById('pintaAla').value
  };
}
function etsiAsunto() {
}
function laskeNelioHinta() {
}
function tulostaOlionTiedot(asuntoOlio) {
  return `Kohdenumero: ${asuntoOlio.kohdenumero}<br>Osoite: ${asuntoOlio.osoite}<br>Postinumero: ${asuntoOlio.postinumero}<br>Hinta: ${asuntoOlio.hinta}<br>Pinta-ala ${asuntoOlio.pintaAla}`;
}
function lisaaAsunto() {
  const asuntoOlio = tulostaOlionTiedot(haeAsunnonTiedot());
  console.log(asuntoOlio);
  document.getElementById('tulostusAlue').innerHTML = asuntoOlio;
}

 

[Pasi80]

Moro,

Sä et palauta mitään tuosta AsunnonTiedot funktiosta.
Sulla on objektin konstruktorissa metodi, mut se ei tarkoita, et kun luot uuden objektin, et se palauttaisi sen automaattisesti.

En ota kantaa, et onko best practices mut jos lisäät return asunto tuohon AsunnonTiedot funktioon niin sit se palauttaa sen objektin, minkä loit ja sit tulostuu haluamasi tieto.

Jos taas kutsuisit document.getElementById('tulostusAlue').innerHTML =
asuntoOlio.tulostaOlionTiedot(); niin saisit sen uuden objektin kokonaan tulostettuna.

Tätä yritin jo aikaisemmin, mutta toimii vain osittain. Palauttaa yksittäisen arvon, jos pyydän esim.
console.log(asuntoOlio.osoite); --> palauttaa osoiteeen.

Mutta ei palauta console.log(asuntoOlio.asunto); --> Undefied tai
console.log(asuntoOlio.tulostaOlionTiedot()); --> Undefied

 

[negge]

Tuossa asunto-oliossa ei ole sellaista avainta kuin asunto.
Tuo jälkimmäinen return palauttaa koko asunto-olion, jolloin voit kutsua sen arvoja noilla avaimilla, tai sitä metodia.

Olet ottanut tuosta asunto-olion tulostaOlionTiedot metodista returnin pois, jolloin sen kutsuminen ei palauta mitään, joten on undefined.

  tulostaOlionTiedot: function () {
      return 'kohdenumero: ' + this.kohdenumero + '<br/> osoite: ' + this.osoite + '<br/> postinumero: ' + this.postinumero + '<br/> Hinta: ' + this.hinta + '<br/>Pinta-ala ' + this.pintaAla;
    }

 

[Tuuchen]

Onko tehtävän vaatimuksena oikeasti tehdä näin hankalasti tuollainen yksinkertainen toiminnallisuus? Harjoitellaanko tehtävässä siis funktion palauttamista objektin sisältä?

Muokkasin hieman @Tup3x laittamaa koodia.

function calculatePricePerSquareMeter(apartment) {
  return apartment.hinta / apartment.pintaAla;
}

function getApartmentHTML(apartment) {
  return `Kohdenumero: ${apartment.kohdenumero}
  <br>Osoite: ${apartment.osoite}
  <br>Postinumero: ${apartment.postinumero}
  <br>Hinta: ${apartment.hinta}
  <br>Pinta-ala ${apartment.pintaAla}
  <br>Neliöhinta ${calculatePricePerSquareMeter(apartment)}`;
}

function addApartment() {
  document.getElementById("tulostusAlue").innerHTML = getApartmentHTML({
    kohdenumero: document.getElementById("kohdenumero").value,
    osoite: document.getElementById("osoite").value,
    postinumero: document.getElementById("postinumero").value,
    hinta: document.getElementById("hinta").value,
    pintaAla: bdocument.getElementById("pintaAla").value,
  });
}

 

[Pasi80]

Onko tehtävän vaatimuksena oikeasti tehdä näin hankalasti tuollainen yksinkertainen toiminnallisuus? Harjoitellaanko tehtävässä siis funktion palauttamista objektin sisältä?

Muokkasin hieman @Tup3x laittamaa koodia.

function calculatePricePerSquareMeter(apartment) {
  return apartment.hinta / apartment.pintaAla;
}

function getApartmentHTML(apartment) {
  return `Kohdenumero: ${apartment.kohdenumero}
  <br>Osoite: ${apartment.osoite}
  <br>Postinumero: ${apartment.postinumero}
  <br>Hinta: ${apartment.hinta}
  <br>Pinta-ala ${apartment.pintaAla}
  <br>Neliöhinta ${calculatePricePerSquareMeter(apartment)}`;
}

function addApartment() {
  document.getElementById("tulostusAlue").innerHTML = getApartmentHTML({
    kohdenumero: document.getElementById("kohdenumero").value,
    osoite: document.getElementById("osoite").value,
    postinumero: document.getElementById("postinumero").value,
    hinta: document.getElementById("hinta").value,
    pintaAla: bdocument.getElementById("pintaAla").value,
  });
}

Juu, tarkoitus on palauttaa arvo + funktio(tms.) objektista.

Tuo neliöhinta ja etsiAsunto minulla pitäisi kyllä osata, siksi en niitä tähän laittanut, mutta oli ongelmia saada palautettua tosiaan arvot objektista. Tarkoitus on käyttää konstruktoria. Olen siis, kuten olette huomanneet todella aloittelija tässä. Alla @negge koodilla sain sen toimimaan läppärillä täysin, mutta pöytäkone edelleen valittaa jotain, vaikka sama koodi Miten se on mahdollista .

 

[Paapaa]

pöytäkone edelleen valittaa jotain

Kannattaa aina kertoa, mitä se "jotain" on, niin kenenkään ei tarvitse arvailla

 

[Pasi80]

Tuossa asunto-oliossa ei ole sellaista avainta kuin asunto.
Tuo jälkimmäinen return palauttaa koko asunto-olion, jolloin voit kutsua sen arvoja noilla avaimilla, tai sitä metodia.

Olet ottanut tuosta asunto-olion tulostaOlionTiedot metodista returnin pois, jolloin sen kutsuminen ei palauta mitään, joten on undefined.

  tulostaOlionTiedot: function () {
      return 'kohdenumero: ' + this.kohdenumero + '<br/> osoite: ' + this.osoite + '<br/> postinumero: ' + this.postinumero + '<br/> Hinta: ' + this.hinta + '<br/>Pinta-ala ' + this.pintaAla;
    }

Ok Kiitos paljon.

Vielä olisi yksi kysymys .
Tämä toimii LÄPPÄRILLÄ nyt täysin oikein, mutta vaikka sama koodi on PÖYTÄKONEESSA, niin toimii osittain oikein. kuvissa selkeentyy.

Tosiaan läppäri tulostaa sekä consoliin/documenttiin (ominaisuuden+funktion) oikein, mutta pöytäkone ei tulosta consoliin oikein (undefined). Documenttiin kyllä tulostaa objektin "funktion", mutta valittaa funktion olemassa oloa. Ja jos yritän tulostaa documenttiin ominaisuutta (esim. osoite), niin valittaa undefined?

 

[Pasi80]

Jaahas komento takaisin... Lähetin läppärissä olevan .js/.html tiedoston pöytäkoneelle, niin nyt näyttäisi toimivan myös pöytäkoneella.. Tarkoittaa, että ohjelmoijan tekemä virhe .. Taas ... Tarkistelen vielä ja kysyn uudestaan, jos ei toimikaan... So Far So Good.

 

[Pasi80]

Kyllä nyt koodi tosiaan toimii. Arvon palautus kuten @negge esitti (pienestä oli näemmä kiinni ).

Tein nuo korjaukset lopuksi läppärillä, kun oli saatavilla ja toimi.

Tämän jälkeen tein saman muutoksen pöytäkoneen koodiin, mutta sitä en saanut toimimaan . Lähetin läppärin koodin pöytäkoneelle ja sen jälkeen toimi. Täytyy varmaan vielä tarkistaa scriptit uudestaan, mutta nopealla silmäilyllä en löytänyt ero läppärin scriptistä sekä pöytäkoneella olevasta scriptistä, mutta tosiaan pöytäkoneella oleva scripti ei toiminut ennen kuin vasta lähetin tuon läppärin (mielestäni sama scripti) pöytäkoneelle.

Kiitos kaikille avusta.

 

[topiv]

Tässä tuli samalla tärkeä oppi versionhallinnasta: sinulla pitää olla samat versiot kaikista tiedostoista kaikilla koneilla joilla haluat koodia käyttää tai muuttaa. Tietokone ei voi arvata, mitä määrittelyjä olet tehnyt tai jos yksi tiedosto puuttuu.

Tsemppiä opiskeluun!