[Homework] JavaScript DOM & Events - Problem 1. Webinar registration form

KatyaMarincheva 572 Точки

[Homework] JavaScript DOM & Events - Problem 1. Webinar registration form

Открих начин да постигна toggle effect в Webinar registration form - да има div visibility change и при check и при uncheck на check box; както и начин да се добавят звездички в цвят, различен от този на основния label text (червените звездички):

Problem 1. Webinar registration form

кайто иска може да покаже и други идеи - може ли например без да променям index.html, без да добавям това onClick="toggleVisibility('invoiceDetails') в input кода?

Тагове:

09/02/2016 13:38:41 JavaScript Advanced

tp_petkov 5 Точки

Здравей, аз реших да го направя по следния начин, поне се променя при всяко кликване в "checkbox"-a:

function showMe (checkbox) {
if (checkbox.checked) {
document.getElementById('invoiceDetails').style.visibility="visible";
}
else {
document.getElementById('invoiceDetails').style.visibility="hidden";
}

А в HTML имам следното:

09/02/2016 14:50:31

r_petrov 14 Точки

Това е много добър подход. Аз го направих не със смяна на видимостта, а с функция за триене на елементите, което, май, е доста по-бавно :)

09/02/2016 21:55:23

KatyaMarincheva 572 Точки

@tp_petkov

Моят първоначален вариант също се променя при всяко кликване - затова и казвам че е toggle effect.

Това с this е умно, показва познаване - аз доста си поиграх докато разбера на какво ти отговаря this в този случай. Но по ООП сме учили за loose coupling, т.е да се пише функцията така, че да се ползва възможно най-универсално. Твоята функция е написана така, че да работи за който checkbox й подадеш, но винаги само върху един div ('invoiceDetails') - аз сега разкачих тази зависимост - функцията ми може да се използва за произволни подадени checkbox и div:

function toggleVisibility(checkBoxLocation, address) {
    var checkBox = document.getElementById(checkBoxLocation);
    var deliveryAddress = document.getElementById(address);
    if (checkBox.checked) {
        deliveryAddress.style.visibility = 'visible';
    } else {
        deliveryAddress.style.visibility = 'hidden';
    }
}

11/02/2016 14:26:50

adrnbeats 37 Точки

Аз съм го разписал на същия принцип, просто съм използвал display.none при unchecked и съответно display.block при checked

09/02/2016 18:14:45 09/02/2016 18:16:16

KatyaMarincheva 572 Точки

@adrnbeats

display.none скъсява цялата форма - интересно е да се знае, но не дава ефекта който искат в примера.

11/02/2016 14:29:12

idmitrov 55 Точки

Ето го и моето решение, добавил съм транзишън както и валидация:

Цък

09/02/2016 20:55:51

tormi 7 Точки

без да добавяш "onClick="toggleVisibility('invoiceDetails') "

HTML:

<input type="checkbox" name="invoice" value="ifInvoce" id="chk-invoice"> Желая фактура<br>

JS :

'use strict';

function attachCheckboxHandlers() {
    // get reference to element containing toppings checkboxes
    var el = document.getElementById('chk-invoice');

    el.onclick = updateShowHide;
}

// called onclick of toppings checkboxes
function updateShowHide(e) {
    if (this.checked) {
        document.getElementById('data-for-invoice').style.visibility = 'visible';
    } else {
        document.getElementById('data-for-invoice').style.visibility = 'hidden';
    }
}

attachCheckboxHandlers();

11/02/2016 00:27:42 11/02/2016 00:28:09

KatyaMarincheva 572 Точки

@tormi

с loose function coupling, стана така:

https://github.com/KatyaMarincheva/JavaScript-Advanced/blob/master/HW%20JavaScript%20DOM%20%26%20Events/Problem%201.%20Webinar%20registration%20form/script.js

и това 
    el.onclick = function() {
        toggleVisibility('invoice', 'invoiceDetails');
    }

работи само както съм го написала - и в stackoverflow съветват същото - не знам как си го направил с el.onclick = updateShowHide;

директно аssign-нато не работи.

11/02/2016 14:38:03

tormi 7 Точки

ето :

http://www.dyn-web.com/tutorials/forms/checkbox/group.php

11/02/2016 15:47:20 11/02/2016 15:47:46