I'm just a beginner in JavaScript and I'm having trouble what kind of function I should use.

This is what I want to do, if I click any buttons in the choices, the value of the button that I choose will be transferred to the button that no value in it and I can also delete the value that I choose in the black button. It is like playing 4pics 1word.

Here is the sample: 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>

I'm just a beginner in JavaScript and I'm having trouble what kind of function I should use.

This is what I want to do, if I click any buttons in the choices, the value of the button that I choose will be transferred to the button that no value in it and I can also delete the value that I choose in the black button. It is like playing 4pics 1word.

Here is the sample: 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>

• javascript
• jquery
• html

• Figuring out your approach to the problem before coding will help. It looks like you will need one button type for the top buttons with a function to attach to that button type and another for the ones on the bottom. Write out with words what will happen when each type of button is clicked. If a top button is clicked and it doesn't have a letter then nothing should happen, if it has a letter does that letter go into the first empty lower button, or back to the button that sent the letter? Once you have that written out it will be easier to address things designing a good structure. – Jason Aller Commented Feb 20, 2014 at 18:15

5 Answers 5

I've updated the Fiddle with a working example.

http://jsfiddle/RF867/11/

The main idea is that when a .letter is clicked we want to fill the first empty .inputx with the clicked letter. And remove it once the .inputx is clicked.

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

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

Here's a working fiddle : http://jsfiddle/RF867/10/

I have first add an id to the second form so i could target it easier.

Then some minor change to the validation function. By minor, i mean changing the this.value to this.innerHTML.

Then i created these 2 functions. Read the ment to understand :

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

Check the updated fiddle. I added following function for click on the texts. I have made some changes in buttons to make the fiddle work without post request.

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

The variable filled is boolean and is used to fill only first empty textbox. Hope this helps you.

i have made some changes and now the code works perfectly

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 update your jsfiddle: http://jsfiddle/RF867/12/

See http://jsfiddle/RF867/15/

The check has been removed for now, but I hope you find the following a little cleaner 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 go with the 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('');
    }
});