When I move the 4 arrows on the keyboard, the green hover color moves over each button. I want when I press "Enter" to write the number that corresponds to each box. For example now I have "columns" and it writes 0,1,2,3,4,5,6. I want to write One Two Three etc .. Of course I use Handebars, Backcone, Lodash so I do not want to change anything in HTML (Handlebars.compile) Thank you very much ..
var columns = 0;
var rowButtons = 0;
var $rows = $('.multiple');
var liSelected;
var arrows = {
left: 37,
up: 38,
right: 39,
down: 40,
enter: 13
};
$(window).keydown(function(e) {
if (Object.values(arrows).indexOf(e.which) > -1) {
e.preventDefault();
$('.multiple li').removeClass('selected');
switch (e.which) {
case arrows.up:
rowButtons = rowButtons == 0 ? $rows.length - 1 : rowButtons - 1;
break;
case arrows.down:
rowButtons = rowButtons == $rows.length - 1 ? 0 : rowButtons + 1;
break;
case arrows.left:
$buttonsInRow = $('.multiple:eq(' + rowButtons + ') li');
columns = columns == 0 ? $buttonsInRow.length - 1 : columns - 1;
break;
case arrows.right:
$buttonsInRow = $('.multiple:eq(' + rowButtons + ') li');
columns = columns == $buttonsInRow.length - 1 ? 0 : columns + 1;
break;
case arrows.enter:
// find the column and row position:
$buttonsInRow = $('.multiple:eq(' + rowButtons + ') li');
var position = (rowButtons * 6 ) + columns + 1;
rowButtons = rowButtons == $rows.click;
document.getElementById('screen').innerHTML = columns;
break;
}
buttonSelected = $('.multiple:eq(' + rowButtons + ') li:eq(' + columns + ')');
buttonSelected.addClass('selected');
}
});
// Click function on handlebars
// Affect href ie. <a href="#" patterns="one"> (It doesn't work on enter(13)
var ListView = BacListViewkbone.View.extend({
events: {
'click a': 'onClick'
},
render: function() {
var rawHTML = _template({ items: myList });
this.$el.html(rawHTML);
this.$items = this.$el.find('a');
return this;
},
onClick: function(e) {
var id = $(e.currentTarget).attr('patterns');
dispatcher.trigger(dispatcher.EventKeys.PATTERNS_SELECTED, myList[id]);
}
});
function init(options) {
dispatcher.register(evs);
new ListView(options).render();
}
return {
init: init
}li.selected {
background: green;
}
.multiple, .allRows li{
text-align:center;
position:relative;
display: flex;
flex-wrap: nowrap;
}
.allRows a {
text-decoration:none;
padding: 3px;
border: 1px solid #555;
color: #222;
margin: 0px;
text-align: center;
font-size:20px;
}
#screen {
background:#222;
color:#ddd;
position:absolute;
top: 100px;
padding:30px 150px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="allRows">
<div class="multiple">
<li><a href="#" patterns="one" id="one" onClick="one()">One</a></li>
<li><a href="#" patterns="two" id="two" onClick="two()">Two</a></li>
<li><a href="#" patterns="three" id="three" onClick="three()">Three</a></li>
<li><a href="#" patterns="four" id="four" onClick="four()">Four</a></li>
<li><a href="#" patterns="five" id="five" onClick="five()">Five</a></li>
<li><a href="#" patterns="six" id="six" onClick="six()">Six</a></li>
</div>
<div class="multiple">
<li><a href="#" patterns="seven" id="seven" onClick="seven()">Seven</a></li>
<li><a href="#" patterns="eight" id="eight" onClick="eight()">Eight</a></li>
<li><a href="#" patterns="nine" id="nine" onClick="nine()">Nine</a></li>
<li><a href="#" patterns="ten" id="ten" onClick="ten()">Ten</a></li>
<li><a href="#" patterns="eleven" id="eleven" onClick="eleven()">Eleven</a></li>
<li><a href="#" patterns="twelve" id="twelve" onClick="twelve()">Twelve</a></li></div>
</ul>
<div id="screen">Numbers</div>If you don't want to store the translation on the elements html themselves, you'll need to have an object mapping the values to the names to be output. Here's a minimalist example:
const numberNameMap = {
1: 'one',
2: 'two',
3: 'three',
4: 'four',
5: 'five'
};
const select = document.querySelector('select');
const output = document.getElementById('output');
select.addEventListener('change', ({ target: { value } }) => {
output.textContent = numberNameMap[value];
});<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="output"></div>