javascript - passing button value to another button

Question

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>

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
– Jason Aller, Commented Feb 20, 2014 at 18:15

Jaagr · Accepted Answer · 2014-02-20 18:22:41Z

2

I've updated the Fiddle with a working example.

http://jsfiddle.net/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;
});

edited Feb 20, 2014 at 18:22

answered Feb 20, 2014 at 18:16

Jaagr

813 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karl-André Gagnon · Accepted Answer · 2014-02-20 18:25:20Z

1

Here's a working fiddle : http://jsfiddle.net/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 comment 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
})

answered Feb 20, 2014 at 18:25

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

2 Comments

VLDCNDN Over a year ago

This is what im looking for thanks for the knowledge and Thank you so much :)

Karl-André Gagnon Over a year ago

My pleasure, was fun to write!

MysticMagicϡ · Accepted Answer · 2014-02-20 18:17:40Z

1

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.

answered Feb 20, 2014 at 18:17

MysticMagicϡ

28.8k16 gold badges77 silver badges126 bronze badges

Comments

Hugo Tostes · Accepted Answer · 2014-02-20 18:22:44Z

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.net/RF867/12/

Jason Aller · Accepted Answer · 2014-02-20 18:34:47Z

See http://jsfiddle.net/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('');
    }
});

Collectives™ on Stack Overflow

javascript - passing button value to another button

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related