Learning about Javascript, HTML, & Web API, Event Listeners, Callback Functions, (Inside Event Listeners), Streams, DOM Emitting Events
DOM, HTML, addEventListener

Me working below on replacing, concatenating and adding an event listener on elements. 

HTML DOM emits a kind of stream of outputs on "events" like, "click", "scroll", and most fundamentally, "change." You can also customize your own "event". Any existing Web API events, or your own customized event, you can then "listen" to that event. The DOM element automatically emits a new snapshot of itself on the event. And you can write "callback" functions to take the argument of that snapshot output ("event") and do stuff with it, e.g., post it to the console.log, or add it elsewhere back into the DOM, or whatever you want.

Another learning. ".innerHTML" is a kind of weird "method" in that it is actually an ATTRIBUTE of elements like, <p>, <h>  etc. For normal DOM objects you can't just say, "element.innerHTML = something ". You need to say, "element.appendData = something ".

Lastly, rather than making lots of DOM calls, you can prepare a Javascript ARRAY and then make calls off of that, and let it be the one point of DOM-call.

+<script>
    + var booking_day = document.getElementById("booking_starts_at_1x");
    + var booking_month = document.getElementById("booking_starts_at_2x");
    + var booking_year = document.getElementById("booking_starts_at_3x");
    + var booking_request_date = [ booking_day.value, booking_month.value, booking_year.value ];
    + var booking_date = document.getElementById("at_date");
    +
    + booking_day.addEventListener("change", function(event){
    + booking_request_date[0] = event.target.value
    + booking_date.value = booking_request_date.join("")
    + console.log(booking_date.value)
    + })
    + booking_month.addEventListener("change", function(event){
    + booking_request_date[1] = event.target.value
    + booking_date.value = booking_request_date.join("")
    + console.log(booking_date.value)
    + })
    + booking_year.addEventListener("change", function(event){
    + booking_request_date[2] = event.target.value
    + booking_date.value = booking_request_date.join("")
    + console.log(booking_date.value)
    + })
    +
    + var booking_hour = document.getElementById("booking_starts_at_4x");
    + var booking_minute = document.getElementById("booking_starts_at_5x");
    + var booking_request_time = [ booking_hour.value, booking_minute.value ];
    + var booking_time = document.getElementById("at_time");
    +
    + booking_hour.addEventListener("change", function(event){
    + booking_request_time[0] = event.target.value
    + booking_time.value = booking_request_time.join("")
    + console.log(booking_time.value)
    + })
    + booking_minute.addEventListener("change", function(event){
    + booking_request_time[1] = event.target.value
    + booking_time.value = booking_request_time.join("")
    + console.log(booking_time.value)
    + })
    +
    +</script>

 


Tim explaining Callback functions to me:

  1. function abstractMethod( eventName, callback ){
  2.   varevent="test"
  3.   if(eventName ==="change"){
  4.     callback(event)
  5.   }
  6. }
  7. abstractMethod('change',function(event){
  8.   console.log(event)
  9. })
  10. #############################################################
  11. def abstract_method( eventName, callback)
  12.   event="test"
  13.   if eventName =="change"
  14.     callback(event)
  15.   end
  16. end
  17. def callbackMethod(event)
  18. end
  19. abstract_method("change", callbackMethod)
| Back

Footerfull