Javascript: objektin funktion arvon palautus ja tulostus

Liittynyt
11.01.2021
Viestejä
40
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());
 

Liitteet

Viimeksi muokattu:
Liittynyt
11.01.2021
Viestejä
40
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;


}
}
}
 
Liittynyt
18.10.2016
Viestejä
55
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

Liittynyt
18.10.2016
Viestejä
2 331
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).
JavaScript:
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;
}
 
Liittynyt
11.01.2021
Viestejä
40
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
 

Liitteet

Liittynyt
18.10.2016
Viestejä
55
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.

Koodi:
  tulostaOlionTiedot: function () {
      return 'kohdenumero: ' + this.kohdenumero + '<br/> osoite: ' + this.osoite + '<br/> postinumero: ' + this.postinumero + '<br/> Hinta: ' + this.hinta + '<br/>Pinta-ala ' + this.pintaAla;
    }
 
Liittynyt
27.07.2017
Viestejä
983
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.
JavaScript:
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,
  });
}
 
Viimeksi muokattu:
Liittynyt
11.01.2021
Viestejä
40
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.
JavaScript:
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 :hmm: Miten se on mahdollista :).
 
Liittynyt
11.01.2021
Viestejä
40
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.

Koodi:
  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?
 

Liitteet

Liittynyt
11.01.2021
Viestejä
40
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.
 
Viimeksi muokattu:
Liittynyt
11.01.2021
Viestejä
40
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 :hmm:. 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.
 
Liittynyt
20.10.2016
Viestejä
594
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!
 
Toggle Sidebar

Uusimmat viestit

Statistiikka

Viestiketjut
237 473
Viestejä
4 163 448
Jäsenet
70 414
Uusin jäsen
O&G

Hinta.fi

Ylös Bottom