使用 Javascript 在单击按钮时执行 2 个函数

Using Javascript to execute 2 functions on button click

本文关键字：执行 函数 按钮 Javascript 单击 使用      更新时间：2023-09-26

我问了几个与此相关的问题，都回答得很好，所以我希望得到更多相关的好答案。

我在页面上有 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";  }

现在，如果我单独使用它，它工作得很好，但我想在点击时执行这两个。第一个，我已经写出来让它通过 id 传输值，第二个 js，是为了改变 css 类而编写的

我希望两者都运行。任何帮助都非常感谢。

谢谢

既然你已经使用了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)
    })
})

演示：小提琴

尝试： 

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";  }
}

演示小提琴

注意：根据您的要求更改文本框 ID。我会建议使用jQuery解决方案，正如Arun P Johny提到的。

相关文章：