[dzimen]

#programowanie #javascript

Cześć, mam do zrobienia projekt (widoczny na zdjęciu). Samą stronę i slider mam zrobioną. Ale mam teraz w javascript zrobić input select w którym wybieramy nazwę produktu. Po wybraniu pojawia się nam się zdjęcie tego produktu i cena za m^2. Jeśli na zdjęciu klikniemy że chcemy ten produkt wyświetla nam się pole liczące nam koszt za podaną ilość. Liczę na pomoc :)

[paziu]

@dzimen:

Liczę na pomoc :)

no dobra, ale w jakiej postaci? ktos ma to za ciebie napisac? nie wiesz jak sie za to zabrac? z czym masz problem?

[dzimen]

@paziu: powiem tak nie wiem jak za to się zabrać

[paziu]

@dzimen: robisz JSON z polami reprezentujacymi produkty (ktore tez beda obiektami o polach zawierajacych urle do zdjec i cene). selecta renderujesz tak, ze jego option values to klucze jsona z produktami. na selecta ustawiasz event change, ktory jak sie odpali to ustawi w img po prawej src produktu ktory jest przypisany do danego klucza. na element, ktory ma sluzyc do potwierdzania checi kupienia ustawiasz event click, ktory ma za zadanie wyswietlic

[dzimen]

@paziu: zobaczę co z tego wyjdzie. a masz jakieś gotowe takie funkcje

[paziu]

@dzimen: nie, nie pisze sie takich gotowych funkcji, to sa customowe rozwiazania. jezeli nie czujesz sie na silach, zeby to napisac, to lepiej komus zaplac. no chyba ze chcesz sie uczyc, ale wtedy musisz wykazac minimum checi poznania tematu

[dzimen]

@paziu: będę pisał jeszcze, na razie spróbuje coś zrobić z tego

[Arveit]

@dzimen: robisz to dla kogoś? Jeśli bierzesz za to kasę to słabo xD

[dzimen]

@Arveit: zadanie w szkole

[Arveit]

@dzimen: aaaaa o kurde, nie spodziewałem się tego, że w szkołach JS-a uczą. Powodzenia w takim razie. Kolega @paziu podesłał Ci praktycznie gotowe rozwiązanie :)

[dzimen]

@Arveit: Technikum informatycze :)

[Arveit]

@dzimen: no spoko, ja w technikum nie miałem js-a :D tylko pascal, c++ i jakieś podstawy javy, a tak z webowych to nic a nic, a szkoda

[dzimen]

@Arveit: to u nas głównie C++, a dodatkowo js, php no i HTML/CSS.

[Arveit]

@dzimen: zazdroszczę, takich szkół nam potrzeba ( ͡° ͜ʖ ͡°) to miłej nauki

[dzimen]

@Arveit: dzięki

[dzimen]

@paziu: @Arveit:

function option(name, value, imagesrc, price){
this.name = name;
this.value = getElementById(siatka).value;
this.imagesrc = imagesrc;
this.price = price;
this.check = function(){
return this.name - this.price;
};
}
var option1 = new option('Siatka pleciona', 1, 'a.jpg', '40zl/mb');
var option2 = new option('Siatka hodowlana', 2, 'b.jpg', '40zl/mb');
var option3 = new option('Siatka heksagonalna', 3, 'c.jpg', '40zl/mb');
var option4 = new option('Siatka leśna', 4, 'd.jpg', '40zl/mb');
var option5 = new option('Siatka zgrzewana',

[Arveit]

@dzimen: wsadź te obiekty w tablice, a potem się do nich odwołuj przez index równy wybranej opcji. Łap zdarzenie onChange w selekcie (albo change, nie pamiętam już), któe wykona się zawsze, gdy zmieni się wartość selecta i w tym zdarzeniu ustawiasz parametr src w jakimś wybranym obiekcie img na Twoe imagesrc przedmiotu o indeksie z option value.

Obiekty JS-owe najlepiej tworzyć przez parę nawiasów klamrowych, notacja jest podobna do JSON-a (ale

[dzimen]

@Arveit:

var tablica_produktow = [{
name: 'Siatka pleciona',
value: 1,
imageSrc: 'img/a.jpg',
price: '40zł/mb'
},{
name: 'Siatka hodowlana',
value: 2,
imageSrc: 'img/b.jpg',
price: '40zł/mb'
},{
name: 'Siatka heksagonalna',
value: 3,
imageSrc: 'img/c.jpg',
price: '40zł/mb'
},{
name: 'Siatka leśna',
value: 4,
imageSrc: 'img/d.jpg',
price: '40zł/mb'
},{
name: 'Siatka zgrzewana',
value: 5,
imageSrc: 'img/e.jpg',
price: '40zł/mb'
}]

[dzimen]

Coś takiego mam zrobić w select?

[Arveit]

@dzimen: eventy typu onchange muszą wywoływać funkcję, w swojej funkcji musisz ustawić po prostu podmienianie źródła obrazu. Zaprogramuj poniższe kroki w onchange:
1. wykryj która opcja jest zaznaczona
2. ustaw źródło obrazu na wartość imageSrc obiektu o indeksie zaznaczonej opcji (0, 1, 2, itp.)

[dzimen]

@Arveit: Mam taką funkcję co kiedyś robiłem. Jak ją przerobić żeby działał tak jak ja bym chciał?
function displayImage() {
var image = document.getElementById("siatka");
var newImage = image.option[image.selectedIndex].value;
}