Javascript与命令按钮交换

时间:2013-11-22 16:32:09

标签: javascript

我正在尝试使用两个文本框设置一个交换,其间有一个命令按钮。

您的想法是在左侧文本框中键入参考/代码,单击按钮,它会在右侧文本框中生成替代参考/代码。

如果用户无法找到他们正在寻找的东西,那么用户可以查看备用轴承参考。

到目前为止我使用的代码是:

<script type="text/javascript">
oldRef = new Array ("Z582","T608","A173");
newRef = new Array ("C850","S708","X449");
function convert()
{
    document.getElementById("v2").value = "";
    for (index=0 ; index < oldRef.length ; index++)
    {
        if ( document.getElementById("v1").value == oldRef[index] )                      
document.getElementById("v2").value = newRef[index];
    }
}
</script>

V1和V2参考文本框ID。

这适用于文本框,但我不知道如何将命令按钮合并到这里,以便他们需要单击中间的按钮才能生成。

我们非常感谢任何建议。

最佳

威尔

2 个答案:

答案 0 :(得分:0)

因此,基本上有两件事你需要完成你的要求。您需要在HTML中创建一个元素,在本例中为一个按钮。然后,您需要捕获要从该元素捕获的事件,然后执行convert函数。

这是完成此任务的一个例子:

在HTML中创建一个按钮

 <button id="btn_command">Command</button>

然后在Javascript中,您希望定位该按钮并向该按钮添加事件侦听器。在示例中,下面的变量var btnCommand通过使用getElementById方法设置为html按钮来获取具有该ID的按钮。然后我们向该元素添加和事件监听器,当单击它时,它执行转换功能。

var btnCommand = document.getElementById ("btn_command") ;

btnCommand.addEventListener("click", convert, false) ;

如果你想使用jQuery,你会做这样的事情。

$('#btn_command').on('click', function() { convert(); });

这是另一种快速而又脏的方法来测试你的功能按钮。 将你的javascript内嵌与你的HTML 混合起来并不是一个好主意,只是为了测试你的按钮,如果你的转换功能正在做你认为你可以说的话

<button onClick="convert()">Command</button>

有很多方法可以完成你的要求。快乐的编码!

答案 1 :(得分:0)

它非常简单的东西你需要做的就是像这样使用按钮点击

document.getElementById('button').onclick = function () {
    document.getElementById("v2").value = "";
    for (var index=0 ; index < oldRef.length ; index++) {
        if (document.getElementById("v1").value == oldRef[index])     
            document.getElementById("v2").value = newRef[index];
    }
}

Here is a demo

我希望这就是你想要的......