Difficulty: Easy
Correct Answer: By changing the CSS cursor property to wait for the body or a specific element using JavaScript.
Explanation:
Introduction / Context:
Web applications sometimes need to indicate that the system is busy, such as when a long running request is in progress. Changing the mouse cursor to a wait or busy shape is a simple visual signal to users. This question checks whether you know how to accomplish that effect using JavaScript and CSS.
Given Data / Assumptions:
- We are running JavaScript in a browser environment.
- CSS controls visual properties such as the cursor style.
- JavaScript can manipulate style properties on DOM elements.
- The desired cursor shape is the standard wait indicator provided by the operating system.
Concept / Approach:
CSS defines a cursor property that determines which mouse cursor shape to display when pointing at an element. Acceptable values include default, pointer, text, wait, and others. JavaScript can change this property dynamically by modifying the style of body or a container element. The correct option must reference changing the CSS cursor property to wait using JavaScript, not relying on file names or operating system drivers.
Step-by-Step Solution:
Step 1: Recall that cursor is a CSS property applied to elements.
Step 2: Remember that JavaScript can access an element style object and assign a new value to cursor.
Step 3: For a global effect, target document.body or a main container element.
Step 4: Choose the option that describes changing the CSS cursor property to wait through JavaScript.
Verification / Alternative check:
You can verify this solution by running a simple command in the browser console such as document.body.style.cursor = "wait";. The cursor changes to a busy indicator while hovering over the page. Setting cursor back to default restores normal behavior. This confirms that the combination of CSS and JavaScript is responsible for cursor changes.
Why Other Options Are Wrong:
Option B is wrong because there is no standard function named setCursorWait in JavaScript. Option C is incorrect because renaming the HTML file does not affect cursors. Option D is impossible due to browser security restrictions that prevent scripts from altering operating system drivers. Option E does nothing to change the style and therefore does not solve the problem.
Common Pitfalls:
A common pitfall is setting the cursor to wait and forgetting to restore it after the operation completes, which confuses users. Another issue is applying the cursor style only to a small element instead of the entire visible area, resulting in inconsistent signals. Good practice is to change the cursor on a wrapper element during long operations and reset it in success and error handlers.
Final Answer:
You can set a wait cursor by using JavaScript to change the CSS cursor property to wait on the body or another relevant element, for example document.body.style.cursor = "wait".
Discussion & Comments