How to assign multiple values to different buttons with just one variable

Question

So I have a variable with cValue what stands for "current value". The problem however whenever my input fields turn into buttons is: Multiple change to buttons and therefore it does not hold a value any longer. I try to assign the values back to the buttons, but since I am refering to cValue (the current value) it will change all the input fields to the last filled out value given. How can I keep the value I had inserted to the input field?

example for clarification: you have 3 input fields, when all 3 are filled out correctly (it matches it vs a JSON file), all the 3 input fields will turn into buttons to indicate you completed that part. However whenever I try to assign the value you had given to the 3 input fields (first input got '1' as value, second as '2' and the third as '3') it will change the value of all the buttons to the last filled out input field. So that would be 3. How can I keep it so that the buttons will show: the first button '1', second '2' and the third '3'?

How my code looks like:

$.map(exercise.syllables, function (syllable, j) { 
        if (!syllable || !syllable.trim().length) {
       // If it doesn't exist or is an empty string, return early without creating/appending elements
           return;
      }

        var innerSylCol = $('<div/>', {
            class: 'col-md-3 inputSyllables'
        });

        var sylInput = $('<input/>', {
            'type': 'text',
            'class': 'form-control syl-input',
            'name':  +c++,
            'id': +idsyll++
        }).on('blur', function() {
            var cValue = $(this).val();

            if(cValue === "") {
               return;
            }

            if (cValue === syllable) {
                correctSylls.push(cValue);
                console.log(correctSylls);
            }

            if (exercise.syllables.length === correctSylls.length) {
                $(this).closest('.syll-row').find('input.syl-input').replaceWith(getCorrectBtn(cValue));
              //  console.log(getCorrectBtn(cValue));
                S.addRight();
                S.playRight();
          } else if (cValue !== syllable){
                $(this).css({'color':'#e00413'});
                S.playWrong();
                S.addWrong();
             }
          });

The part that most likely is wrong:

$(this).closest('.syll-row').find('input.syl-input').replaceWith(getCorrectBtn(cValue));

the function where I create the button:

function getCorrectBtn(value) {
var correctBtn = $('<button/>', {
    'class': 'btn btn-success buttonCorrect',
    'type': 'button',
    'id': "button" + CBC++,
    'value': value
});
}

EDIT: The answer that has been checked is CORRECT. However this is the end result, when I inspect them they do have the desired value... But it doesn's show it in my front-end:

score 0 · Accepted Answer · answered Jul 10 '18 at 10:25

With your current code the condition exercise.syllables.length === correctSylls.length will be matched only when the last input is filled. The first two will just push their correct value inside correctSylls and return, they won't execute the on('blur') code again.

When the third one is filled, the code $(this).closest('.syll-row').find('input.syl-input') will find the three inputs and replace them with the value of the last input.

If you to console.log($(this).closest('.syll-row').find('input.syl-input') you will see an array of inputs elements, the method replaceWith applies to each of them but, being called just on the third element's blur, it will replace them using its value.

I think a possible solution would be to do this instead:

var sylInput = $('<input/>', {
        'type': 'text',
        'class': 'form-control syl-input',
        'name':  +c++,
        'id': +idsyll++
    }).on('blur', function() {
        var cValue = $(this).val();

        if(cValue === "") {
           return;
        }

        if (cValue === syllable) {
            correctSylls.push(cValue);
            console.log(correctSylls);
        }

        if (exercise.syllables.length === correctSylls.length) {
            /******************* Modified code ******************/
            $(this).closest('.syll-row').find('input.syl-input').each(function () { 
              $(this).replaceWith(getCorrectBtn($(this).val()))
            })

            S.addRight();
            S.playRight();
      } else if (cValue !== syllable){
            $(this).css({'color':'#e00413'});
            S.playWrong();
            S.addWrong();
         }
      });

Correct! But now a quick question haha. Why doesn't it show the value tho? When I inspect the element it does say the value is what I wished for... But in the interface it shows just a weird green button. — , Jul 10 '18 at 10:31
EDIT: I tried placing the word between the and that works. how could I now change this that the value not only will be correct, but it will actually place the word in between the — , Jul 10 '18 at 10:37
Nevermind :) I changed the button to an input field with type "button". Now it will take the value to display instead of requiring something between the opening and closing element. — , Jul 10 '18 at 10:39
Cool ;) Anyway if you want to give another shot at the button solution you could take a look at this answer which shows how to create buttons with text (https://stackoverflow.com/a/8936678/10026557) — cornacchia, Jul 10 '18 at 10:44

How to assign multiple values to different buttons with just one variable

1 Answers1