4
19/10/2024 3:33 pm
Topic starter
You are given the following HTML code:
<!DOCTYPE html> <html> <head> <title>Select and Print</title> <style> select { width: 100px } .block { display: inline-block; vertical-align: top; text-align: center } button { width: 60px } #btnRight { display: block; margin-top: 20px } #btnLeft { display: block; margin-top: 5px } #btnPrint { display: block; margin-top: 5px } </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="block"> <div>Available towns</div> <select id="available-towns" size="5"> <option>Sofia</option> <option>Varna</option> <option>Pleven</option> </select> </div> <div class="block"> <button id="btnRight" onclick="move('right')">→</button> <button id="btnLeft" onclick="move('left')">←</button> <button id="btnPrint" onclick="move('print')">Print</button> </div> <div class="block"> <div>Selected towns</div> <select id="selected-towns" size="5"> <option>Plovdiv</option> <option>Ruse</option> </select> </div> <div id="output"></div> <script> function move(command) { // TODO } </script> </body> </html>
Your Task:
Write the missing JavaScript function move(). When a button is clicked, the function is called with a string parameter (a command):
- Parameter "right" is received when the à button is clicked – move the selected town from Available towns to Selected towns
- Parameter "left" is received when the ß button is clicked – move the selected town from Selected towns to Available towns
- Parameter "print" – Replace the contents of the div element with ID "output" with a list of the town names of all towns from Selected towns, joined with a semicolon and space ("; ").
You should not attach event listeners to the buttons, they have already been configured (see the HTML skeleton).
Examples:
1 Answer
3
19/10/2024 3:35 pm
Here is the solution with HTML and JavaScript + jQuery inside:
<!DOCTYPE html> <html> <head> <title>Select and Print</title> <style> select { width: 100px } .block { display: inline-block; vertical-align: top; text-align: center } button { width: 60px } #btnRight { display: block; margin-top: 20px } #btnLeft { display: block; margin-top: 5px } #btnPrint { display: block; margin-top: 5px } </style> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <div class="block"> <div>Available towns</div> <select id="available-towns" size="5"> <option>Sofia</option> <option>Varna</option> <option>Pleven</option> </select> </div> <div class="block"> <button id="btnRight" onclick="move('right')">→</button> <button id="btnLeft" onclick="move('left')">←</button> <button id="btnPrint" onclick="move('print')">Print</button> </div> <div class="block"> <div>Selected towns</div> <select id="selected-towns" size="5"> <option>Plovdiv</option> <option>Ruse</option> </select> </div> <div id="output"></div> <script> function move(command) { let avTown = $('#available-towns option:selected'); let selTown = $('#selected-towns option:selected'); let printTowns = $("#selected-towns option").toArray(); if (command == 'right') { avTown.appendTo($("#selected-towns")); } if (command == 'left') { selTown.appendTo($("#available-towns")); } if (command == 'print') { let result = []; for (let town of printTowns) { result.push(town.textContent); } $("#output").text(result.join("; ")); } } </script> </body> </html>
...and only the JavaScript function move(command):
function move(command) { let avTown = $('#available-towns option:selected'); let selTown = $('#selected-towns option:selected'); let printTowns = $("#selected-towns option").toArray(); if (command == 'right') { avTown.appendTo($("#selected-towns")); } if (command == 'left') { selTown.appendTo($("#available-towns")); } if (command == 'print') { let result = []; for (let town of printTowns) { result.push(town.textContent); } $("#output").text(result.join("; ")); } }