I am working on an asp.net listview that includes a column with 2 input buttons (id=Start, id=Stop), 1 text input (id=TimeMinutes), and 1 span (id=spCountDown). The generated HTML for these controls within the listview looks like this...
<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>
My goal is to pass the values from the "TimeMinutes" text input and the "spCountDown" span into a JavaScript function.
I have tried various methods, including...
<input type="button" onclick="countdown(document.getElementById('TimeMinutes'), document.getElementById('spCountDown'))"; value="Start" id="Start" />
Additionally, I attempted to locate these controls in the JavaScript function using their IDs, but haven't been successful in accessing the correct row.
The objective is to extract the value from the text input and initiate a countdown timer within the JavaScript function.
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 = ''
}
Can anyone guide me on how to effectively pass these controls in order to manipulate the correct values in the right row?
Appreciate any assistance!