Saya mengalami masalah yang tidak dapat saya selesaikan sendiri. Tugas saya adalah:

  1. buat onload event handler init()
  2. di init(), buat 3 objek javascript masing-masing dengan 6 properti yang sama (yang terkait adalah Harga)
  3. inisialisasi nilai properti masing-masing dari 3 objek
  4. buat halaman HTML dengan 3 tombol (satu untuk setiap jenis objek). tombol-tombol ini masing-masing akan memiliki acara onclick yang mengaktifkan pengendali acara yang disebut "getPrice"
  5. buat div untuk teks keluaran
  6. di event handler JS, buat kode sehingga teks keluaran akan menampilkan nama tombol yang diklik dan harga yang sesuai

Masalah utama saya adalah saya tidak mengerti cara menarik properti Price dari objek. Ini HTML saya:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="Scripts/Script.js"></script>
</head>
<body onload="init()">
<input id="btnKoalas" type="button" name="Koalas" value="Koalas" onclick="getPrice()"/>
<input id="btnTulips" type="button" name="Tulips" value="Tulips" onclick="getPrice()"/>
<input id="btnPenguins" type="button" name="Penguins" value="Penguins" onclick="getPrice()"/>

<br />

<p id="divText">This is the output text</p>

</body>
</html>

Dan inilah javascript saya

function init()
{

function Koala(ProdID, SupplierCode, Description, PictureName, QtyOnHand, Price) {
    this.ProdID = ProdID;
    this.SupplierCode = SupplierCode;
    this.Description = Description;
    this.PictureName = PictureName;
    this.QtyOnHand = QtyOnHand;
    this.Price = Price;
}

function Tulip(ProdID, SupplierCode, Description, PictureName, QtyOnHand, Price) {same as above}

function Penguin(ProdID, SupplierCode, Description, PictureName, QtyOnHand, Price) {same as above}

}


objKoala = new Koala('1002', 'S1001', 'Koalas', 'Koala.jpg', '9', '119.95');

objTulip = new Tulip('1003', 'S1002', 'Tulips', 'Tulip.jpg', '9', '7.95');

objPenguin = new Penguin('1004', 'S1003', 'Penguins', 'Penguin.jpg', '9', '127.95');


function getPrice()
{
    var output = objKoala.Price;
    //i know this ^ isn't right.. i'm floundering trying to directly pull the data from my object above and it's still not displaying it
    document.getElementById('divText').innerHTML = output;
}

Saya pikir saya telah menetapkan objek saya sebagai global tetapi ketika saya mengklik tombol saya, tidak ada yang terjadi. Bagaimana saya bisa meneruskan parameter ke fungsi getPrice() untuk menarik properti? Apakah saya membuat kesalahan dalam cara saya membuat objek saya?

1
grcHIDDEN 15 Maret 2017, 19:55

2 jawaban

Jawaban Terbaik

Coba ini alih-alih muatan tubuh itu. Saya memindahkan pendengar acara ke js itu sendiri. Dan ini juga akan bekerja untuk semua hewan. Perhatikan this.name dalam fungsi harga. Itu harus mengambil atribut nama tombol dan mengakses properti masing-masing tanpa Anda harus mengirimkannya sebagai parameter.

var animals = {};

function init() {

    // The event listeners for each button
    document.getElementById('btnKoalas').addEventListener('click', getPrice);
    document.getElementById('btnTulips').addEventListener('click', getPrice);
    document.getElementById('btnPenguins').addEventListener('click', getPrice);

    // We don't need to do it in here, we can also put it outside.
    animals.Koala = new Koala('1002', 'S1001', 'Koalas', 'Koala.jpg', '9', '119.95');
    animals.Tulip = new Tulip('1003', 'S1002', 'Tulips', 'Tulip.jpg', '9', '7.95');
    animals.Penguin = new Penguin('1004', 'S1003', 'Penguins', 'Penguin.jpg', '9', '127.95');
}


function Koala(ProdID, SupplierCode, Description, PictureName, QtyOnHand, Price) {
    this.ProdID = ProdID;
    this.SupplierCode = SupplierCode;
    this.Description = Description;
    this.PictureName = PictureName;
    this.QtyOnHand = QtyOnHand;
    this.Price = Price;
}

function Tulip(ProdID, SupplierCode, Description, PictureName, QtyOnHand, Price) {same as above}

function Penguin(ProdID, SupplierCode, Description, PictureName, QtyOnHand, Price) {same as above}

// This gets called when the user clicks the button
function getPrice() {

    // 'this' here is the element that was clicked, which can be any of the 3 buttons
    // And we can dynamically access the animal based on the name attribute of the currently clicked button
    var output = animals[this.name].Price;

    document.getElementById('divText').innerHTML = output;
}

// We wait for the window to load, inline event listeners like '<body onload="">' are a bad idea 
window.addEventListener('DOMContentLoaded', init);

Dan htmlnya

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="Scripts/Script.js"></script>
</head>
<body>
<input id="btnKoalas" type="button" name="Koala" value="Koalas"/>
<input id="btnTulips" type="button" name="Tulip" value="Tulips"/>
<input id="btnPenguins" type="button" name="Penguin" value="Penguins"/>

<br />

<p id="divText">This is the output text</p>

</body>
</html>
1
Achshar 15 Maret 2017, 18:06

Fungsi Koala, Tulip dan Penguin dicakup di dalam fungsi init, dan tidak dapat diakses di luarnya. Fungsi init tidak benar-benar melakukan sesuatu secara khusus sehingga Anda bisa memindahkannya ke luar.

(Juga, kode di dalam fungsi init() hanya berjalan setelah halaman dimuat, tetapi new Koala dll. berjalan segera saat skrip dimuat, yaitu sebelum Koala fungsi telah didefinisikan di dalam init(). Tapi seperti yang saya katakan, karena Koala tidak dapat diakses dari luar init(), ini bahkan tidak masalah di sini.)

Saat Anda menghapus fungsi init(), kode Anda akan berfungsi dengan baik:

// NOTE: no init() here, so Koala, Tulip, Penguin are globally declared

function Koala(ProdID, SupplierCode, Description, PictureName, QtyOnHand, Price) {
    this.ProdID = ProdID;
    this.SupplierCode = SupplierCode;
    this.Description = Description;
    this.PictureName = PictureName;
    this.QtyOnHand = QtyOnHand;
    this.Price = Price;
}
// etc.

objKoala = new Koala('1002', 'S1001', 'Koalas', 'Koala.jpg', '9', '119.95');
// etc.

function getPrice()
{
    var output = objKoala.Price;
    document.getElementById('divText').innerHTML = output;
}
<input id="btnKoalas" type="button" name="Koalas" value="Koalas" onclick="getPrice()"/>
<!-- etc. -->

<br />

<p id="divText">This is the output text</p>
1
Frxstrem 15 Maret 2017, 17:05