[Solved] Select and Print (Simple DOM Interaction)

Last Post

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')">&rightarrow;</button>
  <button id="btnLeft" onclick="move('left')">&leftarrow;</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:

select print task with dom jquery

select print with jquery and dom task

paulcabalit
Registered
62+ posts
24 38 0

1 Answer

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')">&rightarrow;</button>
    <button id="btnLeft" onclick="move('left')">&leftarrow;</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("; "));
    }
}

hues
Registered
61+ posts
31 30 0

Add a comment