javascript-将按钮值传递给另一个按钮

我只是一个JavaScript的初学者，我不知道应该使用什么样的函数

这就是我想做的，如果我点击选项中的任何按钮，我选择的按钮的值将被转移到没有值的按钮，我也可以删除我在黑色按钮中选择的值。这就像玩4个单词

以下是示例：

E
X
检查
选择
X
E
M
A.
P
E
L

我用一个工作示例更新了小提琴

其主要思想是，单击

.letter

时，我们希望用单击的字母填充第一个空

.inputx

。单击

.inputx

后将其删除

$('.letter').click(function(){
    $('.inputx:empty').first().html($(this).html());
    return false;
});

$('.inputx').click(function(){
    $(this).empty();
    return false;
});

检查更新的。我为点击文本添加了以下功能。我在按钮上做了一些改动，使小提琴在没有post请求的情况下工作

$('.temp').on('click',function(e){
    var filled = false;
    e.preventDefault();
    var s = $(this).text();
    $(".inputx").each(function(){
        if(!filled)
        {    
            if($(this).text() == "")
            {    
                $(this).text(s);
                filled = true;
            }
        }
    });
});

---

变量

filled

是布尔值，仅用于填充第一个空文本框。希望这能对您有所帮助。

我做了一些更改，现在代码运行得非常完美

HTML:

---

我更新了你的JSFIDLE:

这里有一把工作小提琴：

我首先在第二个表单中添加了一个id，这样我可以更容易地找到它

然后对验证函数进行一些小的更改。我的意思是将

this.value

更改为

this.innerHTML

然后我创建了这两个函数。阅读评论以了解：

$('#letters button').click(function(e){ // The new id, target buttons
    e.preventDefault(); //Prevent page reload
    if($('.inputx:empty:first').text($(this).val()).length) //Change the text of the first empty button. Then check if it changed something
        $(this).hide(); //If it changed something, hide the button
})

$('.inputx').click(function(e){ //To remove character on click
    e.preventDefault();
    if($(this).is(':not(:empty)')){ //If there is text in the button
        var letter = $(this).text(); //Get the letter
        $('#letters button:not(:visible)').filter(function(){ //Select only visible buttons
            return this.value == letter; //Check if the value is the same as the letter
        }).first().show(); //There is multiple instance of the same letter (like e), select the first and show
        $(this).empty(); //Remove the value of the button
    }
}).not(':empty').each(function(){ //select button that has text by default
    var letter = $(this).text();
    $('#letters button:visible').filter(function(){
        return this.value == letter;
    }).first().hide(); //Hide default button
})

看

目前支票已被删除，但我希望您能找到以下更干净的支票：

<div id="scratchpad">
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>

<button id="get">Check</button> 

<div id="choices">
    <h3>Choices</h3>
    <button value="X">X</button>
    <button value="E">E</button>
    <button value="M">M</button>
    <button value="A">A</button>
    <button value="P">P</button>
    <button value="E">E</button>
    <button value="L">L</button>
</div>

---

在编码之前找出解决问题的方法会有所帮助。看起来，顶部按钮需要一种按钮类型，带有附加到该按钮类型的功能，底部按钮需要另一种按钮类型。用文字写出当点击每种按钮时会发生什么。如果单击顶部按钮但没有字母，则不应发生任何事情，如果有字母，该字母是进入第一个空的下部按钮，还是返回发送字母的按钮？一旦你写出来，设计一个好的结构将更容易解决问题。这就是我想要的。谢谢你的知识，非常感谢：）我的荣幸，写起来很有趣！

    $('#get').on("click", function(e){
              e.preventDefault();
                var a='';
                $('.inputx').each(function(){
                   a += $(this).text();
                });

                    if (a.toUpperCase() === "EXAMPLE") {
                      alert("success");
                }
                    else{
                        alert("wrong");
                    }
});

$("#clean").on("click",function(){
  $(".inputx").text("");
});

$(".btnsChoices button").on("click", function(){
    var newValue = $(this).val();

    $(".inputx").each(function(){
        if($(this).text() == ""){
           $(this).text(newValue);
            return false;
        }
    });
});

$('#letters button').click(function(e){ // The new id, target buttons
    e.preventDefault(); //Prevent page reload
    if($('.inputx:empty:first').text($(this).val()).length) //Change the text of the first empty button. Then check if it changed something
        $(this).hide(); //If it changed something, hide the button
})

$('.inputx').click(function(e){ //To remove character on click
    e.preventDefault();
    if($(this).is(':not(:empty)')){ //If there is text in the button
        var letter = $(this).text(); //Get the letter
        $('#letters button:not(:visible)').filter(function(){ //Select only visible buttons
            return this.value == letter; //Check if the value is the same as the letter
        }).first().show(); //There is multiple instance of the same letter (like e), select the first and show
        $(this).empty(); //Remove the value of the button
    }
}).not(':empty').each(function(){ //select button that has text by default
    var letter = $(this).text();
    $('#letters button:visible').filter(function(){
        return this.value == letter;
    }).first().hide(); //Hide default button
})

<div id="scratchpad">
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>

<button id="get">Check</button> 

<div id="choices">
    <h3>Choices</h3>
    <button value="X">X</button>
    <button value="E">E</button>
    <button value="M">M</button>
    <button value="A">A</button>
    <button value="P">P</button>
    <button value="E">E</button>
    <button value="L">L</button>
</div>

$('#scratchpad button').click(function(e) {
    var letter = $(this).text();
    if (letter === '') {
        // do nothing
    } else {
        //re-enable choice
        $('#choices button[value=' + letter + ']:empty:first').text(letter);
        //clear button
        $(this).text('');
    }
});

$('#choices button').click(function(e){
    var letter = $(this).text();
    if (letter === '') {
        // do nothing
    } else {
        // place choice
        $('#scratchpad button:empty:first').text(letter);
        // empty button letter
        $(this).text('');
    }
});