Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row
Question
Long-time pilferer, first-time poster.
I'm attempting to create an interactive internet-based GUI with specific features that mimics the control panel of a product of one of my clients, but haven't had much luck getting it to do exactly what I want. I know the answer is out there. I will do my best to describe what I am trying to achieve, without getting too wordy. Really, though, checking out the fork just explains it best.
What I want to do is be able to have the user select rows on a display — in this case the "display" is being rendered as an unordered list — by using html/css buttons. In addition to that, I want them to be able to increase and decrease the value in the text box. Here's the kicker: I want them to be able to increase and decrease the values ONLY when the text box is highlighted. The issue I'm having is I can't get each of the text boxes to increase and decrease; I can only get the first one to change. Hopefully that explanation is clear enough, but please, check out the Plunker to get the best understanding. It will be much clearer when you see it live.
I've made many different drafts/versions of this and have tried using tables, but this has gotten me the closest. Now I just need to get over the hump. I'm completely open to doing this a different way, but it seems like this just needs a tweak here or there to get it going. I had an idea as I was creating this post that might work and doesn't involve a unordered list or list items, and gets "creative" with margins and padding to execute the highlighting. I haven't tried that yet, though.
I tried setting this up on jsfiddle, but something in the way my code is written doesn't jive with their software, so I tried Plunker and it seemed to work. Either way, here's the fiddle: http://jsfiddle.net/brettroby/f5jrL/ , and here's the Plunker: http://plnkr.co/edit/BMSh19?p=preview . If someone wants to go to work on that fiddle and let me know why it's not working, that would be appreciated; however, the Plunker is working just fine as-is.
I also have one other issue that is minor and can be discussed after the main issue is resolved.
Thanks to all for the help!
PS — thanks to all the code writers out there whose code I borrowed to get this far. I'd be dead in the water without stackoverflow.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}
#screen-container {
float: left;
background: #6799ea;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
}
#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}
ul {
margin: 20px 10px 0 -30px;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-size: 1.5em;
}
li {
list-style-type: none;
line-height: 50px;
}
li:selected {
color: #000;
}
#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
}
#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}
#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}
#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}
.number-input {
float: right;
width: 50px;
font-size: 1.5em;
text-align: right;
color: #ffffff;
background-color: 6799ea;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = 'cyan'; }
else { sel[i].style.backgroundColor = '6799ea'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){SBoxPrevNext(-1)}
document.getElementById("down").onclick=function(){SBoxPrevNext(1)}
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number').value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="screen-container">
<ul>
<li>Program Line 1 <input class="number-input" type="number" min="0" max="80" value="0" id="number"></li>
<li>Program Line 2 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 3 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 4 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 5 <input class="number-input" type="number" min="0" max="80" value="0" ></li>
</ul>
</div>
<div id="d-pad">
<div id="up"><p>▲</div><div id="down"><p>▼</div>
<div id="left" onclick="decrementValue()"><p style="">◄</p></div><div id="right" onclick="incrementValue()"><p>►</div>
</div>
</div><!-- end wrapper -->
</body>
</html>
1 answers
solution1
0 ACCPTED 2013-09-24 06:25:38
I have manged to fixed your code, and you can see the correct plunker here
The correction I have made are
Instead of:
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
I have fixed it to:
function incrementValue()
{
var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number'+ SBoxPtr).value = value;
}
And also changed the elements name from number to numberX
Original
<li>Program Line 1
<input id="number" class="number-input" type="number" min="0" max="80" value="0" ></li>
Fixed:
<li>Program Line 1
<input id="number0" class="number-input" type="number" min="0" max="80" value="0" </li>
Added id = number0 and numbered all other li's
if you find my answer helped you please mark it and press the UP key as well. Thanks
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.