Geek asks and answers

Javascript - passing a button value to another button

I'm just a beginner in JavaScript, and I'm having problems with which function I should use.

This is what I want to do if I click on any button in the selection, the value of the button that I select will be transferred to the button in which there is no value, and I can also delete the value that I select in the black button. This is similar to playing 4pics 1word.

Here is an example: jsfiddle

<form>
    <button class="inputx" id="input1"  maxlength="1">E</button>
    <button class="inputx" id ="input2" maxlength="1">X</button>
    <button class="inputx" id ="input3" maxlength="1"></button>
    <button class="inputx" id = "input4" maxlength="1"></button>
    <button class="inputx" id = "input5" maxlength="1"></button>
    <button class="inputx" id = "input6" maxlength="1"></button>
    <button class="inputx" id = "input7" maxlength="1"></button>
    <button id="get">Check</button> 
</form>

<form>
    <h3>Choices</h3>
    <button value ="X" maxlength="1">X</button>
    <button value ="E" maxlength="1">E</button>
    <button value ="M" maxlength="1">M</button>
    <button value ="A" maxlength="1">A</button>
    <button value ="P" maxlength="1">P</button>
    <button value ="E" maxlength="1">E</button>
    <button value ="L" maxlength="1">L</button>
</form>
+3
source share
5 answers

The fiddle works here: http://jsfiddle.net/RF867/10/

First, I add an identifier to the second form to make the task easier.

. this.value this.innerHTML.

2 . , :

$('#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
})
+1

Fiddle .

http://jsfiddle.net/RF867/11/

, .letter .inputx . .inputx.

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

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

fiddle. . , .

$('.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 . , .

+1
source

I made some changes and now the code works fine

HTML:

    <div>
                    <button class="inputx" id="input1"  maxlength="1">E</button>
                    <button  class="inputx" id ="input2" maxlength="1">X</button>
                    <button class="inputx" id ="input3" maxlength="1"></button>
                    <button class="inputx" id = "input4" maxlength="1"></button>
                    <button class="inputx" id = "input5" maxlength="1"></button>
                    <button class="inputx" id = "input6" maxlength="1"></button>
                    <button class="inputx" id = "input7" maxlength="1"></button>
                    <button id="get">Check</button> 
                    <button id="clean">Clean</button>
            </div>

<div class="btnsChoices">
    <h3>Choices</h3>
     <button value ="X" maxlength="1">X</button>
     <button value ="E" maxlength="1">E</button>
     <button value ="M" maxlength="1">M</button>
     <button value ="A" maxlength="1">A</button>
     <button value ="P" maxlength="1">P</button>
     <button value ="E" maxlength="1">E</button>
     <button value ="L" maxlength="1">L</button>
</div>

JS:

    $('#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;
        }
    });
});

and I am updating your jsfiddle: http://jsfiddle.net/RF867/12/

+1
source

See http://jsfiddle.net/RF867/15/

The check has been removed for now, but I hope you find the following small tool to work with:

<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>

JavaScript to migrate with new HTML

$('#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('');
    }
});
+1
source

More articles:


All Articles