9.7.4 Leash CodeHS: Step-by-Step Guide, Example Code & Common Mistakes

If you’re searching for 9.7.4 Leash CodeHS answers, you’ve probably hit the point where your drawings stop being static and start reacting to the mouse. It’s a big step, and this exercise is where many students get stuck.

This guide explains what Leash asks you to build, the concepts behind it, a clean way to approach it, and the mistakes that cause most errors. By the end, you’ll be able to solve Leash and the mouse-based exercises that follow.

What Is 9.7.4 Leash?

Leash is an exercise in Lesson 9.7: Drawing Lines of CodeHS’s Introduction to Computer Science in JavaScript course. The same lesson appears under different numbers in other courses, such as 10.7.4 in Texas Computer Science 1 and 16.2.4 in Oklahoma Computer Science II.

The lesson teaches you to explain how events differ from timers and to build interactive programs that respond to mouse movement. In Leash, one end of a line stays fixed while the other end follows your mouse, like a pet on a leash.

Instructions can differ slightly between course versions, so check the exact requirements in your own exercise.

Concepts You Need Before You Code

Events vs. timers

A timer repeats code on a schedule. An event runs code only when something happens, like a mouse move or a click. Leash uses an event because the leash should change exactly when the mouse moves.

Mouse move handler

You register a function that CodeHS calls every time the mouse moves:

javascript

function start() {
    mouseMoveMethod(moveLeash);
}

function moveLeash(e) {
    // runs on every mouse move
}

Reading mouse coordinates

The event object e tells you where the mouse is:

javascript

var x = e.getX();
var y = e.getY();

Global variables

Objects you want to change later must be declared outside your functions, so both start() and your handler can use them.

Step-by-Step Approach

1. Declare your shapes as global variables above start().
2. Create each shape once inside start() and add() it to the canvas.
3. Choose a fixed anchor point, such as the center of the canvas.
4. Register the handler with mouseMoveMethod.
5. Update the moving parts inside the handler, using the mouse coordinates.
6. Test by moving the mouse and check that only one line appears.

Example Pattern

Use this as a model for the technique, then adapt it to your exercise’s exact instructions (colors, anchor point, shapes):

javascript

var leash;
var pet;

function start() {
    var anchorX = getWidth() / 2;
    var anchorY = getHeight() / 2;

    leash = new Line(anchorX, anchorY, anchorX, anchorY);
    add(leash);

    pet = new Circle(15);
    pet.setPosition(anchorX, anchorY);
    add(pet);

    mouseMoveMethod(moveLeash);
}

function moveLeash(e) {
    leash.setEndpoint(e.getX(), e.getY());
    pet.setPosition(e.getX(), e.getY());
}

The key idea is create once, update on events. The shapes are built one time, and the handler only moves them.

Common Mistakes and Fixes

Problem	Cause	Fix
Hundreds of lines appear	Line created inside the handler	Create it once in start()
Nothing shows up	Forgot add()	Add every shape to the canvas
“Undefined” error in the handler	Variable declared inside start()	Declare it globally
Handler never runs	Name mismatch or extra parentheses	Write mouseMoveMethod(moveLeash) exactly
Leash moves the wrong end	Confusing setPosition and setEndpoint	setPosition moves the start, setEndpoint moves the end

Debugging Tips

• Add println(e.getX()); inside the handler to confirm it fires.
• Check the console for typos in function or variable names.
• Test with fixed numbers first, then switch to mouse coordinates.
• Re-read the exercise text for required colors, sizes, and positions.

Why Leash Matters

The pattern you learn here, storing objects, listening for events, and updating on input, is the basis of games, animations, and interactive web pages. It also prepares you for mouse click exercises and the Advanced Animator badge in the same lesson.

Conclusion

Searching for answers can get you unstuck, but understanding the pattern is what saves you on the next assignment. Break Leash into small steps, use the example above as a guide, and test after every change.

Frequently Asked Questions (FAQs)

1. What is 9.7.4 Leash in CodeHS?
It’s a JavaScript graphics exercise where a line stays anchored at one point while its other end follows the mouse, using a mouse move event.

2. Which CodeHS course is Leash in?
It’s in Introduction to Computer Science in JavaScript, Lesson 9.7. Other courses number it differently, such as 10.7.4 (Texas Computer Science 1) and 16.2.4 (Oklahoma Computer Science II).

3. Why does my program draw many lines instead of one?
You’re probably creating the line inside the mouse handler. Create it once in start() and only update its endpoint in the handler.

4. What does mouseMoveMethod do?
It tells CodeHS to call your function every time the mouse moves. Pass the function name without parentheses.

5. What’s the difference between setPosition and setEndpoint?
On a line, setPosition moves the starting point and setEndpoint moves the other end.

6. Why do I get an “undefined” error inside my handler?
The variable was likely declared inside start(). Declare it outside all functions so the handler can access it.

7. How do I make the leash follow the mouse smoothly?
Update the line’s endpoint on every mouse move event. Because the handler fires continuously as the mouse moves, the leash follows smoothly.

8. Is copying answers a good way to pass CodeHS?
It rarely helps. Later lessons build on this one, so understanding the pattern makes the following exercises much easier.