Keycodes / onclick enter, show Multiple innerHTML names

Admin 1
Viewed 124

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>

handlebars.js jquery javascript
3 Answers

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>

user_77322820

You mean like this?

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;
     }

    buttonSelected = $('.multiple:eq(' + rowButtons + ') li:eq(' + columns + ')');
    buttonSelected.addClass('selected');
    


  }
});


$(window).keydown(function(e){
  if(e.which == 13){
    //get id of the selected li>a element
    var elementId = document.getElementsByClassName('selected')[0].children[0].id;
    document.getElementById('screen').innerHTML = elementId;
  }
})
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">One</a></li>
<li><a href="#" patterns="two" id="two">Two</a></li>
<li><a href="#" patterns="three" id="three">Three</a></li>
<li><a href="#" patterns="four" id="four">Four</a></li>
<li><a href="#" patterns="five" id="five">Five</a></li>
<li><a href="#" patterns="six" id="six">Six</a></li>
</div>
<div class="multiple">
<li><a href="#" patterns="seven" id="seven">Seven</a></li>
<li><a href="#" patterns="eight" id="eight">Eight</a></li>
<li><a href="#" patterns="nine" id="nine">Nine</a></li>
<li><a href="#" patterns="ten" id="ten">Ten</a></li>
<li><a href="#" patterns="eleven" id="eleven">Eleven</a></li>
<li><a href="#" patterns="twelve" id="twelve">Twelve</a></li></div>
</ul>


<div id="screen">Numbers</div>

I've removed

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;

and added

$(window).keydown(function(e){
    if(e.which == 13){
        //get id of the selected li>a element
        var elementId = document.getElementsByClassName('selected')[0].children[0].id;
        document.getElementById('screen').innerHTML = elementId;
    }
})

After your window.keypress function for a dedicated Enter button event listener, also removed all the onClick functions under the assumptions that you thought of using them to get these values but ended up seeing how much work that logic will be so instead I look at the li element with the selected class and use it's child a tag's ID since it is already a name value of the numeric value instead of having to create an array of values for a lookup.

user_85007180

I've simplified your code to do exactly what you want. Try this

$(window).keydown(function(e) {
    if( [37, 38, 39, 40, 13].includes(e.which) ){
        e.preventDefault();

        let $col     = $('.multiple li.selected');
        let $row     = $col.closest('.multiple');
        let $nextCol = $col;
        let $nextRow = $row;
        
        if( [37, 38, 39, 40].includes(e.which) && $col.length === 0 ){
            $('.multiple:first-child').find('li:first').addClass('selected');
            return;
        }

        switch (e.which) {
            case 38: // up key
                $nextRow = $row.is(':first-child') ? $row.siblings(":last-child") : $row.prev();
                break;

            case 40: // down key
                $nextRow = $row.is(':last-child') ? $row.siblings(":first-child") : $row.next();
                break;

            case 37: // left key
                $nextCol = $col.is(':first-child') ? $col.siblings(":last-child") : $col.prev();
                break;

            case 39: // right key
                $nextCol = $col.is(':last-child') ? $col.siblings(":first-child") : $col.next();
                break;
            case 13: // enter key
                if($col.length > 0) $('#screen').text($col.find('a').trigger('click').text());
                break;
        }

        $('.multiple li').removeClass('selected');
        $nextRow.find('li').eq($nextCol.index()).addClass('selected');
    }
});
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">One</a></li>
        <li><a href="#" patterns="two" id="two">Two</a></li>
        <li><a href="#" patterns="three" id="three">Three</a></li>
        <li><a href="#" patterns="four" id="four">Four</a></li>
        <li><a href="#" patterns="five" id="five">Five</a></li>
        <li><a href="#" patterns="six" id="six">Six</a></li>
    </div>
    <div class="multiple">
        <li><a href="#" patterns="seven" id="seven">Seven</a></li>
        <li><a href="#" patterns="eight" id="eight">Eight</a></li>
        <li><a href="#" patterns="nine" id="nine">Nine</a></li>
        <li><a href="#" patterns="ten" id="ten">Ten</a></li>
        <li><a href="#" patterns="eleven" id="eleven">Eleven</a></li>
        <li><a href="#" patterns="twelve" id="twelve">Twelve</a></li>
    </div>
</ul>

<div id="screen">Numbers</div>

user_62142100
Related