Как я могу использовать ключ и значение для одного и того же объекта при повторных кликах

Question

Прошу прощения, если этот вопрос является основным или не задан правильно. Я искал сайт часами, чтобы попытаться исправить ошибку ...

Я пытаюсь сделать угадывание игры. При захвате значения выпадающего списка при отправке я проверяю захваченное значение на ключ от другого объекта массива (theComputer [i]). Если свойство соответствия и его значение истинно, добавьте ключ и значение в compTempObj {}. Затем при повторном выпадающем списке повторите описанный выше процесс, каждый раз добавляя свойство соответствия & к тому же compTempObj {}. Он почти работает, кроме того, он добавляет новый объект для каждого клика, а не к одному и тому же объекту.

Раскрывающийся:

<select class="featureList"> 
<option class="charFeature">male</option> 
<option class="charFeature">female</option> 
<option class="charFeature">black hair</option> 
<option class="charFeature">white hair</option> 
<option class="charFeature">blonde hair</option> 
<option class="charFeature">red hair</option> 
<option class="charFeature">blue hair</option> 
<option class="charFeature">purple hair</option> 
<option class="charFeature">beard</option> 
<option class="charFeature">moustache</option> 
<option class="charFeature">glasses</option> 
<option class="charFeature">earrings</option> 
<option class="charFeature">hat</option> 
<option class="charFeature">green eyes</option> 
<option class="charFeature">black eyes</option> 
</select> 

Мои JS:

//Get SELECT values 
function grabInputVal() { 
    // click event on <select> submit 
    $(".pickAFeatureBtn").on('click', function(e) { 
     e.preventDefault(); 
     // Assign <select> value to var 
     var computerHas = ($(".featureList").val()); 
     theComputer; 
     //check theComputer array for computerHas(select) property 
     for (var i = 0; i < theComputer.length; i++) { 
      // line below check for property val from dropdown against theComputer 
      if (theComputer[i].hasOwnProperty(computerHas) && theComputer[i][computerHas] === true) { 
       var compTempObj = {}; 
       // compTempObj.prop = computerHas; 
       compTempObj[computerHas] = theComputer[i][computerHas]; 
       compTempArr.push(compTempObj); 
       console.log(compTempArr); 
      } else { 
       // Run function to make computer guess will go here 
       console.log('Noooooooooo!'); 
      } 
     } 
    }); 
} 

Answer 1

Проблема заключается в том, что сфера compTempObj является локальной для обработчика события щелчка. На каждом клике он получает создан потому, что его определение в функции мыши:

for (var i = 0; i < theComputer.length; i++) { 
    // line below check for property val from dropdown against theComputer 
    if (theComputer[i].hasOwnProperty(computerHas) && theComputer[i][computerHas] === true) { 


     // THIS VARIABLE IS LOCAL SCOPE!! 
     // Move the definition up higher to have a larger scope 
     var compTempObj = {}; 


     // compTempObj.prop = computerHas; 
     compTempObj[computerHas] = theComputer[i][computerHas]; 
     compTempArr.push(compTempObj); 
     console.log(compTempArr); 
    } else { 
     // Run function to make computer guess will go here 
     console.log('Noooooooooo!'); 
    } 
} 

Я запутался о compTempArr. У него нет определения, поэтому я не знаю рамки этой переменной.

Если вы хотите повторно использовать compTempObj, добавьте его область вверх или сделайте глобальную переменную.

EDIT

Если compTempArr глобальна, вы можете сделать следующее и использовать compTempObj

for (var i = 0; i < theComputer.length; i++) { 
    // line below check for property val from dropdown against theComputer 
    if (theComputer[i].hasOwnProperty(computerHas) && theComputer[i][computerHas] === true) { 


     // THIS VARIABLE IS LOCAL SCOPE!! 
     // Move the definition up higher to have a larger scope 
     var compTempObj = compTempArr[0] || {}; 


     // compTempObj.prop = computerHas; 
     compTempObj[computerHas] = theComputer[i][computerHas]; 

     if(compTempArr.length === 0) 
      compTempArr.push(compTempObj); 
     console.log(compTempArr); 
    } else { 
     // Run function to make computer guess will go here 
     console.log('Noooooooooo!'); 
    } 
} 

Что я делаю толкает compTempObj на compTempArr в качестве первого свойства. IDK, если вы используете compTempArr для чего-нибудь еще, но поскольку он находится в глобальном масштабе, вы можете использовать . ОДНАКО!!Я рекомендую сделать следующее:

• Переименуйте переменные так, чтобы они объясняли, что вы пытаетесь сделать или что они описывают. temp - ТРЕБУЕМАЯ практика именования, не делайте этого!
• Определите свои игровые данные как один объект и включите этот объект во всемирную область. Таким образом, ваша игровая логика может получить доступ к данным игры, а не беспокоиться о области обзора.
• Определите свои функции как именованные функции и передайте их в обработчики событий. Таким образом, вы можете организовать свою логику игры в одном месте, а не иметь свою логику игры и вашу настройку игры все вместе.

Удачи вам!

Answer 2

в каждом из вариантов, которые Вы, вероятно, нужно добавить атрибут значения к нему.

<select class="featureList"> 
    <option class="charFeature" value="male" >male</option> 
    <option class="charFeature" value="female" >female</option> 
    <option class="charFeature" value="black hair" >black hair</option> 
    .... 
</select> 

then var computerHas = ($ (".ListList"). Val()); вы получите значение своего опциона :)

Answer 3

Если я не полностью упустил что-то, я думаю, что ответ заключается в простом переносе объявления переменной за пределы функции. Вы повторно создаете объект каждый раз, когда выполняется событие клика. Так что вместо того, чтобы ...

$(".pickAFeatureBtn").on('click', function(e) { 
    ... 
    var compTempObj = {}; 
    ... 
} 

... сделать ...

var compTempObj = {}; 
$(".pickAFeatureBtn").on('click', function(e) { 
    ... 
} 

В зависимости от сферы применения функции grabInputVal вам может понадобиться, чтобы поставить его вне этого, хотя.

Кроме того, как указал Плейман Луонди, вам нужны теги параметров, которые требуют атрибута значения. Или просто использовать текст выбранной опции, как так ...

$(".featureList option:selected").text(); 

Answer 4

Надеюсь, что это поможет вам попасть в правый направление-

1. var computerHas = ($(".featureList").val()); дает массив так, какое значение вы имеете в виду? (Проверьте, хотите ли вы использовать $(".featureList").each(function(){}))
2. var compTempObj перезаписывается каждый раз, когда вы вызываете функцию. Следовательно, оно новое каждый раз.

Возможно, вы должны потребительных

var YourVariable; 
// Since it is defined outside the function value will not be overwritten each time function is called 

    function your_function(){ 
     ............YOUR CODE .......... 

     // YourVariable = AssignNewValue 

     ............MORE CODE .......... 
    }