[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

Виж всички отговори

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

Виж всички отговори