Q: Move Towns Up / Down (Simple DOM Interaction)

+3 votes

You are given the following HTML code:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Move Up / Down</title>
select { width: 70px }
.block { display: inline-block; vertical-align: top }
#btnUp { display: block; margin-top: 18px }
#btnDown { display: block; margin-top: 10px }
<script src=""></script>
<div class="block">
<select id="towns" size="5">
<div class="block">
<button id="btnUp" onclick="move(-1)">&uparrow;</button>
<button id="btnDown" onclick="move(+1)">&downarrow;</button>
function move(direction) {
// TODO: …

Your Task:
Write the missing JavaScript code to make the arrow buttons work as expected.

  • The [↑] button move the selected item up in the list. If no item is selected, it should do nothing.
  • The [↓] button should move the selected item down in the list. If no item is selected, it should do nothing.

Note: When an item is selected, it has the property selected.


move town task 1

move town task 2

asked in JavaScript category by user icabe

1 Answer

+1 vote

Here is the JavaScript function solution:

function move(direction) {
	let townToMove = $('#towns option:selected');
	if (direction == -1) {
	if (direction == +1) {
answered by user eiorgert