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

Question

У меня есть два выбора. Первый отображает male из fem, а второй отображает имена в зависимости от выбранной опции mal или fem. Это работает хорошо. Но я хочу отобразить эти значения в новом div. Однако я могу получить доступ только к опции mal или fem. Я думаю, это потому, что это ЭТО. Но как добавить к этому тексту содержание имя? Например, создать div с textContent male James или fem Lola? См. Код и ссылку ниже

const namesArr = {
     male: ['Tom', 'James', 'John', 'Jimmy', 'Angelo', 'Patrick', 'Ron'],
     fem: ['Jemma', 'Samantha', 'Lola', 'Penny', 'Mary']
 }

function show(){  
    document.querySelector('#name').textContent = ''
    document.querySelector('.result').textContent = ''

 let val = this.value

  for(let i of Object.keys(namesArr)) {

    if(val === i) {

   namesArr[i].forEach(elem => {
         newElem.value = i
         newElem.textContent = elem;
         document.querySelector('#name').style.display = 'inline-block'
         document.querySelector('#name').append(newElem)             
         document.querySelector('.result').textContent = 
         this.options[this.selectedIndex].textContent               
       });
     }
  }
}
document.querySelector('#sex').addEventListener('click', show);

Ссылка на JSFiddle

Answer 1

Необходимо добавить имя прослушивателя событий, выберите также

jsfiddle

const namesArr = {
  male: ['Tom', 'James', 'John', 'Jimmy', 'Angelo', 'Patrick', 'Ron'],
  fem: ['Jemma', 'Samantha', 'Lola', 'Penny', 'Mary']
}

function show(){  
   document.querySelector('#name').textContent = ''
   document.querySelector('.result').textContent = ''
 
  let val = this.value
 
      for(let i of Object.keys(namesArr)) {
    
       if(val === i) {
   
       namesArr[i].forEach(elem => {
           let newElem = document.createElement('option');
           newElem.value = i
           newElem.textContent = elem;
          document.querySelector('#name').style.display = 'inline-block'
          document.querySelector('#name').append(newElem)   
            
          document.querySelector('.result').textContent = this.options[this.selectedIndex].textContent   
            
           });
       }
    }
}
function nameChange(){
var sexDDL = document.getElementById("sex");
var sex = sexDDL.options[sexDDL.selectedIndex].text;
 document.querySelector('.result').textContent = sex +" "+this.options[this.selectedIndex].textContent 
}
document.querySelector('#name').addEventListener('click', nameChange);

document.querySelector('#sex').addEventListener('click', show);

<select name="sex" id="sex">
  <option value="male">Male</option>
  <option value="fem">Feminine</option>
</select>
<select name="name" id="name"></select>

<div class="result"></div>