Javascript 选择/高亮显示行并更改同一行中高亮显示的文本字段的值（续）

这是之前项目的延续，如图所示（）。用户脚本非常有用。谢谢大家!

下一步要让它以我需要的方式工作，就是让它通过onClick来编辑菜单中的第四个选项，但方式不同于上面的选项，因为它需要一组不同的选项。此行的选项仅涉及更改文本，不涉及任何形式的数字。我已经知道如何通过onClick从stackoverflow上的另一个线程更改文本，但是现在我需要将其集成到我现有的设计中。我已经启动了Plunker（链接如下）。正如您所看到的，我可以通过使用我放在包装器下面的小按钮（出于测试目的）来更改第四个选项行的文本。我需要这一个能够调整，只有当它是突出显示，并与现有的D-垫左/右箭头-与其他行做同样的方式。显然，这些值也需要根据按下哪个按钮来增减。文本短语从一个地方开始，在另一个地方结束，因此onClick事件需要按顺序循环

要进一步复杂化或添加到项目中，我需要能够让用户向下滚动到“更多”↓" 选项，然后进入一个全新的选项集/选项窗口。我可以想象我们会使用CSS overflow:property中的一些东西，但是当将它与所有这些代码结合起来时，我真的不确定如何实现这一点

一如既往，我们感谢您的帮助

把它扔在这里：

/*后续颜色：6acff6 6799ea青色*/
身体{
字体系列：arial、helvetica、无衬线字体；
字体大小：1.7em；
}
#包装纸{
宽度：800px；
高度：400px；
填充：10px；
边框：1px实心#4747；
}
#筛网容器{
浮动：左；
背景：#6acff6；
宽度：485px；
高度：300px；
边框：3倍实心#EFEF；
边界半径：15px；
颜色：#ffffff；
溢出：隐藏；
}
#筛网容器h1{
利润率：15px0；
文本对齐：居中；
文本转换：大写；
字号：1em；
字号：100；
}
#d-pad{
位置：相对位置；
浮动：对；
宽度：300px；
高度：300px；
边框：3倍实心#EFEF；
边界半径：15px；
}
保险商实验室{
利润率：5px10px0-35px；
文本转换：大写；
}
李{
列表样式类型：无；
线高：50px；
填充：0 10px 0 10px；
}
李：入选{
颜色：#000；
}
.数字输入{
浮动：对；
宽度：50px；
高度：40px；
字号：1em；
文本对齐：右对齐；
颜色：#ffffff；
背景色：透明；
边界：0px；
}
输入[类型=编号]：-webkit内部旋转按钮，
输入[类型=编号]：-webkit外部旋转按钮{
-webkit外观：无；
}
#向上{
位置：绝对位置；
保证金：5px0；
左：120px；
宽度：50px；
高度：50px；
背景色：#EFEF；
光标：n-调整大小；
}
#上、下、左、右{
文本对齐：居中；
字体大小：.65em；
}
#向下{
位置：绝对位置；
保证金：0.5px 0；
底部：0；
左：120px；
宽度：50px；
高度：50px；
背景色：#EFEF；
光标：s-调整大小；
}
#左{
位置：绝对位置；
左：0px；
顶部：110px；
宽度：50px；
高度：50px；
保证金：5px；
背景色：#b7d9ef；
光标：w-调整大小；
}
#对{
位置：绝对位置；
右：0px；
顶部：110px；
宽度：50px；
高度：50px；
保证金：5px；
背景色：#b7d9ef；
光标：e-resize；
}
a{
显示：块；
身高：100%；
宽度：100%；
文字装饰：无；
}
//用于：http://www.codingforums.com/showthread.php?t=223429
var-SBoxPtr=0；
函数SBoxPrevNext（金额）{
var sel=document.getElementById（'screen-container'）.getElementsByTagName（'li'）；
SBoxPtr+=金额；
如果（SBoxPtr<0）{SBoxPtr=0；}
如果（SBoxPtr>sel.length-1）{SBoxPtr=sel.length-1；}
对于（var i=0；i
sel.length-1）{SBoxPtr=sel.length-1；}
对于（var i=0；i
// 
// 
// 
// 
// 
// 

---

我终于明白你的意思了。 为了实现这一点，您必须向每个输入框添加一个新属性

  onfocus="DoSomething()"

所以最终的结果是

<input onfocus="FocusStripe(0)" class="number-input" type="number" min="0" max="80" value="0" id="number0" ">

我已经创建了一个工作plnker

我希望这能满足你的需要。

---

如果此答案对您有帮助，请将其标记为有帮助的答案。

因此，您的问题需要代码，而不仅仅是在第三方网站上。↑ 谢谢。代码越来越长了，所以我不知道在这样的情况下，我们有这么多的东西需要遵守什么礼节。从现在开始，我会一直发布我的代码……我已经检查了你在plunker中创建的示例，一切似乎都如预期的那样正常工作，我使用的是chrome和fire fox，你使用的浏览器是什么？我已经在所有的浏览器上进行了测试f他们：Safari、Chrome、Firefox，IE。问题是，在第四行中，当你突出显示该行并更改数字时，我希望发生的事件没有发生。应该发生的是显示“帮助”的文本应循环浏览其他文本位。如果将鼠标光标放在其中，然后用键盘输入一个数字（请确保现在使用数字1-7），您将看到文本是如何变化的。只有通过键盘更改文本时才会发生这种情况。我希望在GUI中使用D-pad时发生这种情况。我已经完成了您刚才描述的操作，并且它按照您描述的方式工作。在“帮助”中，按下D-pad将按照您描述的方式更改其数字。谢谢您为我处理此问题。我非常感激我仍然有点不知所措。我的电脑似乎没有工作。它仍然像以前一样工作。我如何获得它，使文本句子循环通过？就像现在一样，D-pad没有这样做（在Safari和Chrome中）。理想的情况是数字输入字段不存在，因为在真实界面中没有数字。它只是几个文本选项。我在演示中包含了文本选项。我创建了一个快速插入器，以便您可以看到+箭头应该做什么：。我相信这有助于说明我希望发生的事情。

  onfocus="DoSomething()"

<input onfocus="FocusStripe(0)" class="number-input" type="number" min="0" max="80" value="0" id="number0" ">

function FocusStripe(stripeID) {
   var sel = document.getElementById('screen-container').getElementsByTagName('li');
   sel[stripeID].style.backgroundColor = '0871b9';
   sel[SBoxPtr].style.backgroundColor = '6acff6';
   SBoxPtr = stripeID;
}