javascript - передача значения кнопки на другую кнопку

Question

Я просто начинающий в JavaScript, и у меня возникают проблемы с функцией, которую я должен использовать.

Это то, что я хочу сделать, если я нажму любую кнопку в выборе, значение кнопки, которую я выбираю, будет перенесено на кнопку, в которой нет значения, и я также могу удалить значение, которое я выбираю в черной кнопке. Это похоже на 4pics 1word.

Вот пример: 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> 

Answer 1

Вот рабочая сцена: http://jsfiddle.net/RF867/10/

Я сначала добавлю идентификатор ко второй форме, чтобы я мог легче ее настроить.

Затем некоторые незначительные изменения на валидация функция. По второстепенному я имею в виду изменение 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 
}) 

Answer 2

Я обновил скрипку с рабочим примером.

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

Answer 3

Проверьте обновленные версии 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 является логической и используется для заполнения только первое пустое текстового поля. Надеюсь, это поможет вам.

Answer 4

я сделал некоторые изменения и теперь код работает отлично

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

и я обновить jsfiddle: http://jsfiddle.net/RF867/12/

Answer 5

См http://jsfiddle.net/RF867/15/

Проверка была удалена на данный момент, но я надеюсь, что вы найдете следующее немного очистителя для работы с:

<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 в перейти с новым 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(''); 
    } 
});