Question

I have an asp.net listview with a column that contains, 2 input type = button (id=Start, id=Stop, 1 input type = text (id=TimeMInutes) and 1 span(id=spCountDown).
The HTML rendered from all these controls including the listview is…

 <table id="ctl00_ContentPlaceHolder1_lstViewFormulas_itemPlaceholderContainer" style="vertical-align:top; border:solid 1px gray">
        <tr id="ctl00_ContentPlaceHolder1_lstViewFormulas_Tr1" style="vertical-align:top; border:solid 1px gray">
            <td class="ListViewHeader" style="width:20%">
                 <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_lblFormName">Step Name</span></td>
            <td class="ListViewHeader" style="width:10%" align="center">
                 <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_lblTiming">Timing</span></td>
            <td class="ListViewHeader" style="width:30%">
                 <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_Label6">Area Used</span></td>
            <td class="ListViewHeader" style="width:10%">
                 <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_lblClock">Timer</span></td>
            <td class="ListViewHeader" style="width:30%">
                 <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_lblProd">Products</span></td>
        </tr>


        <tr style="">
           <td>
              <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_ctrl0_lblFormName">Step 1</span>
           </td>
           <td>
              <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_ctrl0_lblTiming">20</span>
           </td>
           <td>
              <span id="ctl00_ContentPlaceHolder1_lstViewFormulas_ctrl0_lblAreaUsed">Scalp</span>
           </td>
           <td>

            <input type="button" onclick="countdown(document.getElementById('TimeMinutes'), document.getElementById('spCountDown'))"; value="Start" id="Start" />
            <input type="button" onclick='stopcountdown()'; value="Stop" id="Stop" />


            <input type="text" value='20' id="TimeMinutes" />
              <span id="spCountDown"></span>
           </td>

I am trying to pass the “TimeMinutes” input type = “text” and the “spCountDown” Span into a javascript function.

I have tried several ways, including…

<input type="button" onclick="countdown(document.getElementById('TimeMinutes'), document.getElementById('spCountDown'))"; value="Start" id="Start" />

I have also tried to find these controls within the javascript function using the input id, but I don’t get the right row.

I need to take the value from the input type = text and in the javascript function start a countdown.

  var interval;
  var seconds=0;
  function countdown(txtminutes, spanid) {
      interval = setInterval(function () {
          var sp = document.getElementById("spanid");
          var minutes = document.getElementById("txtminutes").value
          if (seconds == 0) {
              if (minutes == 0) {
                  sp.innerHTML = "countdown's over!";
                  clearInterval(interval);
                  return;
              } else {
                  minutes--;
                  seconds = 60;
              }
          }
          if (minutes > 0) {
              var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
          } else {
              var minute_text = '';
          }
          var second_text = seconds > 1 ? 'seconds' : 'second';
          sp.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
          seconds--;
      }, 1000);
  }

  function stopcountdown() {
      window.clearInterval(interval);
      var sp = document.getElementById("CountDown");
      sp.innerHTML = ''
  }

How can I pass in these controls so I can get and set the right value from the right row?

Thanks

Answer 1

You call getElementById twice!

If you use this

<input type="button" onclick="countdown(document.getElementById('TimeMinutes'), document.getElementById('spCountDown'))"; value="Start" id="Start" />

Then change this

var minutes = document.getElementById("txtminutes").value;

to this

var minutes = txtminutes.value;

You pass a reference to the element as a parameter, then you try to create a new reference to a element with id of the reference. That wont work. Simply remove the document.getElementById part.

Also… dont forget to cast the string to a int using parseInt()