Javascript - How to make the attribute date of a li belonging to another li

Navigation
0

I have the following html: 

<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
    <li class="ford" data-answer="0,5">Ford</li>
    <li class="fiat" data-answer="2">Fiat</li>
    <li class="renault" data-answer="3">Renault</li>
    <li class="ferrari" data-answer="">Ferrari</li>
    <li class="honda" data-answer="4">Honda</li>
    <li class="chevrolet" data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
    <li class="edge">Edge</li>
    <li class="onix">Ônix</li>
    <li class="palio">Palio</li>
    <li class="sandero">Sandero</li>
    <li class="civic">Civic</li>
    <li class="fusion">Fusion</li>
    <li class="fusquinha">Fusquinha</li>
</ul>

I wanted to list these lis through javascript. (Example: Make honda belong to civic) Sorry if the doubt is stupid, but I could not find an answer yet.

    
asked by anonymous 14.08.2017 / 22:37

3 answers

0

Here is an example of checking the response by looking for the value with regular expression comparison because it can contain several responses: 

// Monta o Select para checar a relação
var $select = document.createElement('select');
var $firstLis = document.querySelectorAll('.first-column li');

for(var i=0; i<$firstLis.length; i++) {
  var $option = document.createElement('option');
  $option.innerHTML = $firstLis[i].innerHTML;
  $option.setAttribute('value', $firstLis[i].getAttribute('data-answer'));
  $select.appendChild($option);
};

var $secondLis = document.querySelectorAll('.second-column li');
for(var i=0; i<$secondLis.length; i++) {
  $secondLis[i].appendChild($select.cloneNode(true));
  $secondLis[i].appendChild(document.createElement('span'));
}

// Verifica as respostas
addListener(document.getElementById('check-answer'), 'click', function() {
  var $lis = document.querySelectorAll('.second-column li');
  
  for(var i=0; i<$lis.length; i++) {
    var validator = 'Incorreto';
    if(new RegExp("," + i + ",").test(',' + $lis[i].querySelector('select').value + ',')) {
      validator = 'Correto';
    }
    $lis[i].querySelector('span').innerHTML = validator;
  };
});

// Helper function addListener
function addListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler, false);
  }
  else if (element.attachEvent) {
    element.attachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = handler;
  }
}
<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
    <li class="ford" data-answer="0,5">Ford</li>
    <li class="fiat" data-answer="2">Fiat</li>
    <li class="renault" data-answer="3">Renault</li>
    <li class="ferrari" data-answer="">Ferrari</li>
    <li class="honda" data-answer="4">Honda</li>
    <li class="chevrolet" data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
    <li class="edge">Edge: </li>
    <li class="onix">Ônix: </li>
    <li class="palio">Palio: </li>
    <li class="sandero">Sandero: </li>
    <li class="civic">Civic: </li>
    <li class="fusion">Fusion: </li>
    <li class="fusquinha">Fusquinha: </li>
</ul>

<button id="check-answer">Verificar Resposta</button>
    
15.08.2017 / 22:23
0

You will need to know beforehand who owns whom you can relate to. Example: 

let marcas = [{
    marca: ' ford',
    modelo: 'Edge'
  }, {
    marca: ' ford',
    modelo: 'Fusion'
  }, {
    marca: ' fiat',
    modelo: 'Palio'
  }, {
    marca: ' renault',
    modelo: 'Sandero'
  }, {
    marca: ' ferrari',
    modelo: 'ferrari'
  }, {
    marca: ' honda',
    modelo: 'Civic'
  },
  {
    marca: ' chevrolet',
    modelo: 'Ônix'
  }, {
    marca: ' vw',
    modelo: 'Fusquinha'
  }
];

let carros = document.querySelectorAll('.second-column li');

// percorrendo cada elemento li
carros.forEach((carro) => {
  
  // filtra qual marca possui o modelo da li que está em foco
  // quando encontrar adiciona uma nova classe na li
  // com o nome da marca
  marcas.filter(i => i.modelo == carro.innerHTML).forEach(selecionado => carro.className += selecionado.marca )
})
<p class="question"><span class="mark-question">1.</span> Relacione as fabricantes aos seus veículos</p>
<ul class="first-column">
  <li class="ford" data-answer="0,5">Ford</li>
  <li class="fiat" data-answer="2">Fiat</li>
  <li class="renault" data-answer="3">Renault</li>
  <li class="ferrari" data-answer="">Ferrari</li>
  <li class="honda" data-answer="4">Honda</li>
  <li class="chevrolet" data-answer="1">Chevrolet</li>
</ul>

<ul class="second-column">
  <li class="edge">Edge</li>
  <li class="onix">Ônix</li>
  <li class="palio">Palio</li>
  <li class="sandero">Sandero</li>
  <li class="civic">Civic</li>
  <li class="fusion">Fusion</li>
  <li class="fusquinha">Fusquinha</li>
</ul>

I've added the same brand class to the template.

    
15.08.2017 / 21:52
0

You want to put a list inside another, like the example: 

<html>
<body>

<h2>Lista</h2>

<ul>
  <li>Honda</li>
  <li>Fiat
    <ul>
    <li>Palio</li>
    <li>Bravo</li>
    <li>Uno</li>
    <ul>
        <li> Novo </li>
        	<ul>
        	<li> 2017 </li>
                <li> 2018 </li>
                <ul>
                	<li> Versão SP </li>
                </ul>
        	</ul>
        <li> Way </li>
    </ul>
    </ul>
  </li>
  <li>Nissan</li>
  	<ul>
    	<li> Cerato </li>
        <li> Soul </li>
    </ul>
</ul>

</body>
</html>
    
15.08.2017 / 23:22
Regular expression query, data from a url How to instantiate HttpClient in Angular typescript 4?