Element reference bindings (bind:this) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input element to the variable.

Svelte

<input [1]={inputRef} />

Drag options to blanks, or click blank then click option'

Abind:value

Buse:action

Con:click

Dbind:this

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:value instead of bind:this

Trying to use on:click for binding

Using use:action which is for actions, not element references

The bind:this directive binds the element to the variable inputRef, allowing direct access to the DOM element.

2fill in blank

medium

Complete the code to focus the input element after the component mounts.

Svelte

<script>
  let inputRef;
  import { onMount } from 'svelte';
  onMount(() => {
    [1].focus();
  });
</script>

Drag options to blanks, or click blank then click option'

AinputRef

Bdocument.querySelector('input')

Cthis

Dwindow

Attempts:

3 left

💡 Hint

Common Mistakes

Using document.querySelector instead of the bound variable

Trying to use this or window which are not the element reference

The variable inputRef holds the reference to the input element via bind:this. Calling inputRef.focus() sets focus on it.

3fill in blank

hard

Fix the error in the code by completing the binding correctly.

Svelte

<script>
  let buttonRef;
</script>
<button [1]={buttonRef}>Click me</button>

Drag options to blanks, or click blank then click option'

Abind:button

Bbind:this

Cbind:element

Dbind:ref

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:ref or bind:element which are not valid in Svelte

Trying to bind to bind:button which is not a directive

The correct syntax to bind an element reference is bind:this. Other options are invalid and cause errors.

4fill in blank

hard

Fill both blanks to bind the textarea element and clear its content on button click.

Svelte

<script>
  let textAreaRef;
  function clearText() {
    [1].value = '';
  }
</script>
<textarea [2]={textAreaRef}></textarea>
<button on:click={clearText}>Clear</button>

Drag options to blanks, or click blank then click option'

AtextAreaRef

Bbind:value

Cbind:this

DtextRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:value instead of bind:this for element reference

Using wrong variable name like textRef

Trying to clear content by setting variable instead of element's value

The textarea element is bound to textAreaRef using bind:this. The function clears the content by setting textAreaRef.value to an empty string.

5fill in blank

hard

Fill all three blanks to bind a div element, change its background color, and log its width.

Svelte

<script>
  let divRef;
  function changeColor() {
    [1].style.backgroundColor = 'lightblue';
    console.log([2].offsetWidth);
  }
</script>
<div [3]={divRef}>Color me!</div>
<button on:click={changeColor}>Change Color</button>

Drag options to blanks, or click blank then click option'

AdivRef

Cbind:this

Dbind:style

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind:style instead of bind:this

Using different variable names inconsistently

Trying to access style or offsetWidth on wrong variable

The div element is bound to divRef using bind:this. The function changes the background color by accessing divRef.style.backgroundColor and logs the width using divRef.offsetWidth.