Jquery .val() on input returns [object Undefined]

Question

I want to append an with href to Google's favicon fetcher with the value from an input when the button is clicked.

The result I want to achieve is:

<img href="https://s2.googleusercontent.com/s2/favicons?domain=https://google.com/">

The actual result:

<img href="https://s2.googleusercontent.com/s2/favicons?domain=[object Undefined]">

https://jsfiddle.net/u5tp79a4

<!DOCTYPE html>

<html>

<head>
    <title>Upload Image</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="upload.js"></script>
    <style>
        #e-favicon {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <input type="text" id="input">
    <button id="button">Get favicon</button>
    <div id="e-favicon"></div>
</body>

</html>

const element = "#e-favicon";
const button = "#button";
const input = "#input";

$(document).ready(function() {
    console.log("js loaded");

    $(button).on('click', function () {
        const favicon = "https://s2.googleusercontent.com/s2/favicons?domain=" + toString($(input).val());
        console.log("button click");
        console.log(favicon);

        $(element).append('<img href="' + favicon + '">');
    });
});

Just remove toString, you don't need it ---> const favicon = "s2.googleusercontent.com/s2/favicons?domain=" + $(input).val();...it seems it's converting the expression to a string instead of the resulting value — lissettdm
– lissettdm, Commented Feb 28, 2022 at 18:01

lissettdm · Accepted Answer · 2022-02-28 18:17:25Z

2

Converting to string is what is causing an unexpected result. You don't need to convert .val() to string since it returns a string value:

$(button).on('click', function () {
    const favicon = "https://s2.googleusercontent.com/s2/favicons?domain=" + $(input).val();
    //...
});

edited Feb 28, 2022 at 18:17

answered Feb 28, 2022 at 18:09

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery .val() on input returns [object Undefined]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related