CODEWITHSUNDEEP
javascriptjqueryhtml
VLDCNDN
VLDCNDN

Reputation: 692

javascript - passing button value to another button

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>

Upvotes: 4

Views: 2025

Answers (5)

Jason Aller
Jason Aller

Reputation: 3652

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

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

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

Upvotes: 1

Hugo Tostes
Hugo Tostes

Reputation: 412

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/

Upvotes: 1

Jaagr
Jaagr

Reputation: 81

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;
});

Upvotes: 2

MysticMagicϡ
MysticMagicϡ

Reputation: 28823

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.

Upvotes: 1

Related Questions