How do I get the first/last char of a string from a user input (input.value)

#javascript #beginners #webdev

So I'm trying to build this project where I ask the user to enter their name, then I display said name in full and put the initials in a button instead of "player one". I don't know why but slice(-1), charAt(str.length -1) are not working.

<div>
        <label for="name">Enter your name</label>
        <input type="text" name="" id="yn">
        <button class="submit">Submit</button>
    </div>
    <p class="welcome"></p>

var yourname = document.querySelector("#yn");
var welcome = document.querySelector(".welcome");
var div = document.querySelector("div");
var submit = document.querySelector(".submit");

submit.addEventListener("click", function(){
    div.classList.add("hide");
    welcome.textContent = "Welcome " + yourName.value
})

Thanks

Top comments (4)

Daniel Dark • May 14 '20 • Edited

There's a typo

wrong:

var yournmae = document.querySelector("#yn");

correct:

var yourName = document.querySelector("#yn");

Morris John • May 14 '20

Okay thanks. I've corrected it

Daniel Dark • May 14 '20

And here is what you want:

submit.addEventListener('click', () => {

    const {value} = yourName

    const firstChar = value.slice(0, 1)
    const lastChar = value.slice(-1)

    div.classList.add('hide')
    welcome.textContent = firstChar + lastChar
})

Morris John • May 14 '20 • Edited

Wow, that worked.

I don't even understand the code (*LOL I haven't learnt the 'const / {} => yet *) but yeah it worked.

Thank you very much

DEV Community

How do I get the first/last char of a string from a user input (input.value)

Top comments (4)

Read next

TypeScript for Domain-Driven Design (DDD)

.NET Development and Localization for JustAnswer – case study

The Rise of AI-Driven Web Development

Why Webflow is the Future for Developers 2025