Space is not sliced from my text in front-end

Question

So here is my front-end JS code for the keyHandler:

let snippet = document.getElementById('snippet'); 
let remaining = document.getElementById('remaining'); 
let typed = document.getElementById('typed');
let result = document.getElementById('result');

const keydownHandler = (event) => {
    let key = event.key;

    if (key.length === 1 && /[a-z .]/i.test(key) ) {
        if (key === snippet.innerText[typed.innerText.length]) {
            if(key == " "){            
                console.log('its space !!!!!!');
                typed.innerText +=  ' ';
            }else{
                typed.innerText +=  key.toLowerCase();
            }
            remaining.innerText = snippet.innerText.slice(typed.innerText.length);
            result.innerText = '';
        } else {
            result.innerText = 'Incorrect key pressed!';
        }
    }

    let message = JSON.stringify({
        'snippet_text':snippet.innerText,
        'typed_text': typed.innerText,
        'remaining_text': remaining.innerText,
    });

    if (socket.readyState === WebSocket.OPEN) {
        console.log('Sending message:', message);
        socket.send(message);
    }
};

The problem is that when I type the ' ' (spacebar) , it does not get removed from my remaining text on the front-end.

Here is the back-end consumer:

def receive(self, text_data):
    data = json.loads(text_data)
    typed_text = data.get('typed_text', '').lower()
    snippet_text = data.get('snippet_text', '').lower()
    
    is_correct = typed_text == snippet_text
    if is_correct:
        self.current_snippet_index += 1
        self.player_score += 1
        self.send(json.dumps({
            'is_correct': is_correct,
            'player_score': self.player_score,
        }))
        self.send_new_snippet() #send new snippet with full details
    else:
        remaining_text = snippet_text[len(typed_text):]
        self.send(json.dumps({
            'snippet_text': snippet_text,
            'typed_text': typed_text,
            'remaining_text': remaining_text,
        }))

Here is an image of the results:

Ray Wallace · Accepted Answer · 2024-05-20 21:33:48Z

Since you are using .innerText and not .value, I'll assume that you are using div or span for your elements. In which case, your problem is that .innerText returns the rendered text content from the DOM (which removes trailing whitespace).

The fix is simply to use .innerHTML in place of .innerText. Or of course, you could use input elements and their .value properties.

Run the code snippet to see it working:

let snippet = document.getElementById('snippet');
let remaining = document.getElementById('remaining');
let typed = document.getElementById('typed');
let result = document.getElementById('result');


const keydownHandler = (event) => {
    let key = event.key;

    if (key.length === 1 && /[a-z .]/i.test(key) ) {
        if (key === snippet.innerHTML[typed.innerHTML.length]) {
            if(key == " "){
                console.log('its space !!!!!!');
                typed.innerHTML +=  ' ';
            }else{
                typed.innerHTML +=  key.toLowerCase();
            }
            remaining.innerHTML = snippet.innerHTML.slice(typed.innerHTML.length);
            result.innerHTML = '';
        } else {
            result.innerHTML = 'Incorrect key pressed!';
        }
    }

    let message = JSON.stringify({
        'snippet_text':snippet.innerHTML,
        'typed_text': typed.innerHTML,
        'remaining_text': remaining.innerHTML,
    });

    // if (socket.readyState === WebSocket.OPEN) {
    //     console.log('Sending message:', message);
    //     socket.send(message);
    // }

    console.log( message )
};

document.addEventListener( "keydown", keydownHandler )

label {
  display: block;
  margin-bottom: 1rem;
}

label span {
  display:  inline-block;
  border: solid 1px orange;
  height: 1.2rem;
  width: 15rem;
}

        <label for="snippet">Snippet <span id="snippet">Test for spaces</span> </label>
        <label for="remaining">Remaining <span id="remaining"></span> </label>
        <label for="typed">Typed <span id="typed" contentEditable="true"></span> </label>
        <label for="result">Result <span id="result"></span> </label>

exactly !! , i changed to 'innerHTML' and it worked !! thanks a lot , i though innerHTML returns the html elements not the texts etc

Collectives™ on Stack Overflow

Space is not sliced from my text in front-end

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related