Loading...
KatyaMarincheva avatar 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 кода?

Тагове:
1
JavaScript Advanced
tp_petkov avatar 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 имам следното:

<input type="checkbox" id="invoice" name="invoice" value="yes" onclick="showMe(this);">

2
r_petrov avatar r_petrov 14 Точки

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


 
1
KatyaMarincheva avatar 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';
    }
}
2
adrnbeats avatar adrnbeats 37 Точки

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

0
09/02/2016 18:16:16
KatyaMarincheva avatar KatyaMarincheva 572 Точки

@adrnbeats

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

0
idmitrov avatar idmitrov 55 Точки

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

Цък

0
tormi avatar 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();

 

1
11/02/2016 00:28:09
KatyaMarincheva avatar 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-нато не работи.

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.