Exercise 12.2

This is Exercise 12.2, lecture on Javascript quirks, used in the course IDATA2301 Web technologies at NTNU, campus Aalesund.

Go back to exercise list.

Purpose

The purpose of the exercise is practice debugging JS code with breakpoints and tracing the code step-by-step.

Instructions

Use this document. There is one intentional bug in it. If you want to also fix the bug, create a copy of this file, save it on your PC and use that file instead.

Below you see an input field and a button. When you press on the button, the text in the input field should be split into words using spaces as separators. Each word should be added as a new line in the textarea. There is an (intentional) bug in the code though. Your task is to find the bug using debugger with breakpoints and step-by-step tracing of the code.

1. Open this file in the browser. Try to click on the "Add and split" button. You will see that it does not perform the desired action.
2. Open Developer tools. (Ctrl+Shift+J on Windows, Option + ⌘ + J on Mac)
3. Set a breakpoint on the first line of the function splitAndAdd(). You can find the Javascript code by going to the "Sources" tab in the developer tools. Find the HTML file in the file tree. Javascript code is placed at the end of the HTML file.
4. Now hit the button Add and split, again you will find it below.
5. Trace the code step-by-step using F10 key or the "step over next function call" button:
6. Trace the code until you find a bug there! You can resume the operation (get out of debugger) by pressing F8 or the "Resume" icon:

The input elements