我已经问了几个与此相关的问题,所有问题都得到了很好的回答,所以我希望得到一些更好的答案。
我在页面上有9个按钮,带有文本输入。当用户单击其中一个按钮时,他们放入文本输入字段的文本将被传输到该页面上的另一个文本框,但我也希望该按钮更改颜色。
所以我的html就是这样:
<input id="fbvalbox" type="text" placeholder="Your personal message" />
<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
这是一个文本框和一个按钮。所以,这是我的另一个框,我希望在该框中输入的消息,这个。
<input id="design_choice" type="text" value="" />
现在我的javascript,这是我的脚本,它将消息传送到我的设计选择文本框。
window.onload = function(){
document.getElementById('butval1').onclick = function(){
document.getElementById('design_choice').value = document.getElementById('fbvalbox').value;
}
效果很好,但我也想让按钮改变颜色。
所以,我将onclick =“changeId(this)”添加到第一个框中,但它不起作用。 这是一个单独的.js文件,但也在页面的头部。
function changeID(elm){
var NAME = elm;
var currentClass = NAME.className;
if (currentClass == "butz") {
NAME.className = "butzz";
} else {
NAME.className = "butz"; }
现在,如果我单独使用它,它的效果很好,但我想执行这两个onclick。第一个,我已经写出来通过Id传输值。写入第二个js,以改变css类
我想要两个都跑。任何帮助深表感谢。
谢谢
答案 0 :(得分:2)
由于您使用过jQuery标记,为什么不使用jQuery解决方案
<input id="fbvalbox" type="text" placeholder="Your personal message" />
<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" />
<input id="design_choice" type="text" value="" />
然后
function changeID(elm) {
$(elm).toggleClass('butz butzz')
}
jQuery(function($){
$('#butval1').click(function(){
$('#design_choice').val($('#fbvalbox').val())
})
})
jQuery(function($){
$('#butval1').click(function(){
changeID(this)
})
})
演示:Fiddle
答案 1 :(得分:1)
尝试:
function changeID(elm){
document.getElementById('design_choice').value = document.getElementById('fbvalbox').value;
var NAME = elm;
var currentClass = NAME.className;
if (currentClass == "butz") {
NAME.className = "butzz";
} else {
NAME.className = "butz"; }
}
的 DEMO FIDDLE 强>
注意:根据您的要求更改文本框ID。我会建议像Arun P Johny提到的那样使用jQuery解决方案。