Member Avatar for lf.gene

Hi all,

I'm down with a question. How do i add in a javascript function into another function? For eg. I have a button that enable me to create a new table on the page. when the table is created, there is input of text with calendar function. Is it possible to do so?

Greatly appreciated for your help.

  • 3 Contributors
  • 6 Replies
  • 187 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lf.gene

Dani AI

Generated

Short answer: yes — put the calendar behavior on the newly created elements rather than trying to jam a big HTML string with inline handlers. was right to suggest keeping functions in a separate JS file, and helped show why moving handler logic out of an inline string fixes quoting/typo problems. Two modern, reliable patterns follow: directly create elements and attach listeners, or use event delegation on the table container so dynamically added rows “just work.”

Example (create elements + attach listeners):

// create input and calendar button, then wire events
var input = document.createElement('input');
input.type = 'text';
input.name = 'day';
input.id = 'day1';
input.addEventListener('mouseover', function () {
  if (window.timeoutId) clearTimeout(window.timeoutId);
});
input.addEventListener('mouseout', function () {
  if (window.timeoutDelay) calendarTimeout();
});
var btn = document.createElement('img');
btn.src = 'images/calendar.gif';
btn.className = 'calendar-trigger';
btn.addEventListener('click', function (e) {
  e.preventDefault();
  if (window.g_Calendar && typeof g_Calendar.show === 'function') {
    g_Calendar.show(e, input); // adapt second arg to your calendar API
  } else {
    console.error('calendar API not available');
  }
});
cell.appendChild(input);
cell.appendChild(btn);

Event delegation (better if you add many rows):

table.addEventListener('click', function (e) {
  var t = e.target;
  if (t.classList && t.classList.contains('calendar-trigger')) {
    var inp = t.previousElementSibling; // or find by selector
    if (window.g_Calendar) g_Calendar.show(e, inp);
  }
});

Quick troubleshooting checklist: open DevTools and look for console errors (undefined g_Calendar, missing timeoutId), inspect the generated DOM to confirm listeners/IDs, avoid relying on window.status (browsers ignore it), and if you must use innerHTML escape quotes properly. If a calendar library has an attach/setup API, call it after inserting new inputs — that’s often the missing step.

Recommended Answers

All 6 Replies

Member Avatar for Taywin

Depends on how you add it. If you add it as innerHTML and compose function calls with text, you could do that. If you add it with element creation, you could do it too but would be a little bit different way of adding function call to the page. It would be better to have function definition in an external javascript file and include the source at the top of the page, so you can call it whenever and wherever you want in the page.

Edited by Taywin because: n/a
Member Avatar for lf.gene

function insCell()
{
var x=document.getElementById('tr2').insertCell(1);
var y=document.getElementById('tr1').insertCell(1);
y.innerHTML= 'Day 1';
x.innerHTML='<input type = "text" name = "day">onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show Calendar';return true;" onmouseout="if (timeoutDelay) calendarTimeout();window.status='';" onclick="g_Calendar.show(event,'frm.day',true,'yyyy-mm-dd'); return false;"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt="">';
}

Here the code that i having problems with. I was thinking is there a need to append for that sentence in red and how can i append?

Member Avatar for Luckychap

Arranging your code:

function insCell()
{
    var x=document.getElementById('tr2').insertCell(1);
    var y=document.getElementById('tr1').insertCell(1);
    y.innerHTML= 'Day 1';
    x.innerHTML='<input type="text" name="day" onmouseover="onOver();" onmouseout="onOut();" onclick="onClick();"><img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt="">';
}
function onOver() {
    if (timeoutId) clearTimeout(timeoutId);
    window.status='Show Calendar';
    return true;
}

function onOut() {
    if (timeoutDelay) calendarTimeout();
    window.status='';
    return true;
}

function onClick() {
    g_Calendar.show(event,'frm.day',true,'yyyy-mm-dd'); 
    return false;
}

There were typos.

Edited by Luckychap because: n/a
Member Avatar for lf.gene

Thanks!it work! but my calendar is unable to work now.

Member Avatar for lf.gene

Does not work either

Member Avatar for lf.gene

Hey! i solved it already! Thanks a million to you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.