Selecting/Highlighting Rows AND Changing Value of

2019-09-03 02:50发布

站内问答 / JavaScript
1344 1 4

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>&#9650</div><div id="down"><p>&#9660</div>
<div id="left" onclick="decrementValue()"><p style="">&#9668;</p></div><div id="right" onclick="incrementValue()"><p>&#9658;</div>
</div>

</div><!-- end wrapper -->

</body>
</html>

1条回答
男人必须洒脱
2楼-- · 2019-09-03 03:20

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)