The main problem is because you are using 5 vectors when the question says 4. So the sex is supposed to be stored in a vector and not in 2 as it has:
var vetm =[];
var vetf =[];
It should be just a vector:
var vetsexo = [];
That way lets you know for each person what sex. Retraining the uses of vetm and vetf to vetsexo would look like this:
var vetnome =[];
var vettelefone =[];
var vetidade =[];
var vetsexo =[]; //vetsexo em vez dos outros 2
window.onload=function(){
var f = document.getElementById("f");
var m = document.getElementById("m");
var idade = document.getElementById("idade");
var telefone = document.getElementById("telefone");
var nome = document.getElementById("nome");
var div= document.getElementById("div");
var mulheres = document.getElementById("mulheres");
var registrar = document.getElementById("registrar");
var maiores = document.getElementById("maiores");
var telMulheres = document.getElementById("telMulheres");
// functions ====
registrar.onclick=function(){
vetnome.push(nome.value);
vetidade.push(idade.value);
vettelefone.push(telefone.value);
//registra m ou f com base no que está escolhido
vetsexo.push (m.checked?"m":"f");
}
telMulheres.onclick=function(){
var table = "<table>";
table += "<tr>";
table += "<th> Nome: </th>";
table += "<th> Telefone: </th>";
table += "<th> Sexo: </th>";
table += "</tr>";
for (i=0; i<vetnome.length; i++){
if(vetsexo[i]=="f"){
table += "<tr>";
table += "<td>"+ vetnome[i] +"</td>";
table += "<td>"+ vettelefone[i] +"</td>";
table += "<td>"+ vetsexo[i] +"</td>"; //agora vetsexo
table += "</tr>";
} //o else era desnecessário
}
table += "</table>";
div.innerHTML=table;
}
}
Nome <input type="text" id="nome"><br>
Telefone <input type="text" id="telefone"><br>
Idade <input type="number" id="idade"><br>
Sexo M<input type="radio" id="m" name="sexo"> F<input type="radio" id="f" name="sexo"><br><br>
<div id="div"></div>
<br>Registre algumas pessoas do sexo feminino e depois use a função Tel Mulheres<br><br>
<button id="mulheres">Mulheres</button>
<button id="registrar">Registrar</button>
<button id="maiores">Maiores</button>
<button id="telMulheres">Tel Mulheres</button>
Structuring Properly
I know that the enunciation indicated to do this, to even cut to train the use of vectors, but the structuring is not at all indicated. It would be much better to use an object representing a person with its various fields, and to use only a vector of objects pessoa .
So I put a solution structured in this way and using modern javascript functionality that facilitates:
let pessoas = [];
//const para todos os elementos do html e busca com array destructuring assignment
const [nome, telefone, idade, m, f] = [...document.querySelectorAll('input')];
const [mulheres, registrar, maiores, telMulheres] = [...document.querySelectorAll('button')];
const div = document.getElementById("div");
//addEventListener é o mais apropriado para registar o click
registrar.addEventListener('click', function() {
pessoas.push({ //adicionar um objeto pessoa com varios campos
nome: nome.value,
idade: idade.value,
telefone: telefone.value,
sexo: m.checked ? "m" : "f"
});
});
//Uma vez que todos os botões de funcionalidade listam determinadas pessoas em tabela
//fiz uma função para mostrar um array no html como tabela. Assim cada botão
//tem apenas de "reduzir" o array aos valores necessários e chamar a função passando
//esse mesmo array
function mostrarEmTabela(lista) {
//utilizar template literals para simplificar a escrita do html
let table = '<table>
<tr>
<th> Nome: </th>
<th> Telefone: </th>
<th> Idade: </th>
<th> Sexo: </th>
</tr>';
//for of para percorrer a lista e criar o html correspondente
for (let pessoa of lista) {
table += '<tr>
<tr>
<td>${pessoa.nome}</td>
<td>${pessoa.telefone}</td>
<td>${pessoa.idade}</td>
<td>${pessoa.sexo}</td>
</tr>';
}
table += "</table>";
div.innerHTML = table;
};
//agora estes botões so chamam a função passando uma lista já filtrada
mulheres.addEventListener('click', function(){
mostrarEmTabela(pessoas.filter(p=>p.sexo === 'f'));
});
maiores.addEventListener('click', function(){
mostrarEmTabela(pessoas.filter(p=>p.idade>18));
});
telMulheres.addEventListener('click', function(){
mostrarEmTabela(pessoas.filter(p=>p.sexo=== 'f' && p.idade >= 18 && p.idade <= 25));
});
Nome <input type="text" id="nome"><br>
Telefone <input type="text" id="telefone"><br>
Idade <input type="number" id="idade"><br>
Sexo M<input type="radio" id="m" name="sexo"> F<input type="radio" id="f" name="sexo"><br><br>
<div id="div"></div>
<br>Registre algumas pessoas do sexo feminino e use qualquer função<br><br>
<button id="mulheres">Mulheres</button>
<button id="registrar">Registrar</button>
<button id="maiores">Maiores</button>
<button id="telMulheres">Tel Mulheres</button>
References to the various modern javascript functionalities I've used
