我在使用某些 javascript 以及它如何控制 html“文本框”时遇到了一些问题。
首先,这是我所拥有的; JavaScript:
function UpdateOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=false;
document.getElementById("add").disabled=false;
document.getElementById("submit").disabled=false;
document.getElementById("edit").disabled=false;
document.getElementById("update").disabled=true;
// Show display box, 'DispCurOrder'
document.getElementById('all_labels').disabled=true;
}
function EditOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=true;
document.getElementById("add").disabled=true;
document.getElementById("submit").disabled=true;
document.getElementById("edit").disabled=true;
document.getElementById("update").disabled=false;
document.getElementById('all_labels').disabled=false;
}
这个想法很简单...我有一些按钮和输入来生成一行文本,并将其转储到禁用的文本框中。如果运算符(operator)注意到他们输入了“o”或想要更改某些内容,则他们单击“编辑订单”,它会禁用所有常规按钮,并启用文本框和“更新”按钮。 “更新顺序”按钮则相反。
现在,当我仅使用向文本框添加行时,一切正常。您可以看到每一行都附加到文本框(还有另一个 java 函数可以执行一堆错误检查等操作,但关键在于它获取文本框的内容,将“\n”上的内容解析为数组,然后附加新的文本行。然后它获取该数组并将其作为一个新字符串组合在一起,然后将其放回文本框中。这是没有所有错误检查内容的部分;
function AppendOrder()
{
// let's set up an error flag.
var AppendError="";
var str1=document.forms["MyForm"].DataEntry1.value;
var str2=document.forms["MyForm"].DataEntry2.value;
if( /* checking variable str1 for errors */)
{
AppendError="Error in str 1 here";
}
if( /* checking variable str1 for errors */)
{
AppendError=AppendError+"Error in str 2 here";
}
// Display the error message, if there are no errors, it will clear what was there.
$('#AppendStatus').html(AppendError);
if(AppendError=="")
{
// it's all good, update the display
// create line of text
curEntry=str1 + " -- " + str2;
// let's get the current order into a list
str=document.getElementById('all_data').innerHTML;
if(str1=="Empty")
{
// make curOrder = to 1 element array of curEntry
var curOrder=[curEntry];
}
else
{
// parse str1 into an array and parse it to curOrder.
// Then push curEntry on the end.
var curOrder=str1.split("\n");
curOrder.push(curEntry);
}
// now we should have an array called 'curOrder[]'. Let's show it
// on the web page.
$('#all_labels').html(curOrder);
}
}
现在,我遇到的问题是,使用“添加”按钮向显示添加一两行(或更多行),然后进入“编辑”模式(启用文本框) )并且我进行了所有更改,“添加”按钮不起作用。
奇怪的是,当我按下“重置”按钮(这只是一个重置按钮)时,它会显示我在编辑后所做的所有添加,并且编辑的内容消失了。
现在...问题...我对文本框有什么不理解的地方吗?我需要做一些技巧才能让它发挥作用吗?我这一切都错了吗?除了“文本框”之外,我应该使用不同的工具吗?
非常感谢任何帮助!!
格雷格
最佳答案
在 your jsFiddle 中发现拼写错误.
我做的第一件事是添加:
alert('hi there');
到脚本的最顶部,位于 $(document).ready()
包装器内。请注意,在 jsFiddle 上,您看不到 document.ready 包装器,它是不可见的,因此只需像我一样将警报放在 javascript block 的顶部(链接到我的新 jsFiddle 位于答案的底部)
接下来,我注意到您通过 ID 单独引用多个控件来启用/禁用它们。如果多个控件共享同一个类,则可以一次引用它们,因此我发明了 class="orderentry"
并将该属性添加到每个控件中。这删除了 8 行代码,使故障排除更加容易。
然后,我开始删除/取消删除。首先,我删除了 javascript 面板中除 alert('hi There');
之外的所有内容,并运行了 jsFiddle。警报弹出。伟大的。所以我使用 Ctrl+z 取消删除所有内容。接下来,我选择了除下一个代码块之外的所有内容,并删除了选择。我运行 jsFiddle,再次弹出警报。
我继续删除/取消删除,直到发现警报不再起作用的地方 - 这揭示了有问题的代码块。只需仔细研究该特定区域的语法并发现错误:
$('#txtOrder').attr({'disabled':'disabled')}; <== ERROR: note final parentheses
而不是
$('#txtOrder').attr({'disabled':'disabled'}); <== CORRECT: note final parentheses
希望这对您有所帮助,祝您项目的其余部分一切顺利。
关于javascript - 使用 javascript 更新文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18623500/