Text input value empty

App Building
1

Hi, I run into this weird issue where javascript logic I built fails sometimes. After debugging, it boils down to a text input value (text_input.value). The text_input has a value because when my mouse hoovers over the field name in the Javascript window, it shows the text_input.value has a value. But when my mouse hoovers over value part of the code (text_input.value), it shows empty value. What's weird is it only happens occasionally, often when I start using the app.

I know this might be a long shot but anyone has any idea what's going on?

2

@Wei_Chen Can you share the screenshot of your javascript code?

3

image

The script is simply to compare the the data with the input value.

When this happens, if I move the mouse of the "first_name_input", Retool will show it is an object with the "value: property. The value of the "value" property is what I entered in the text input field. But if I move the mouse over the "value" next to the "first_name_input", Retool shows the value is empty "". When I try to console log the value of "first_name_input.value", the log shows the value is empty.

4

Hello @Wei_Chen!

Is the method compareString a custom function you defined? I tried using it in a Retool app thinking it was part of the default library but it said the func was undefined :sweat_smile:

For a quick refactor, you can use the the 'and' operator to connect logical operations together. This could potentially help with the codes evaluation.

Something along the lines of
if (compareString(row.F_Name, first_name_input.value) && compareString(row.L_Name, last_name_input.value) && compareDate(row.Body, bday_input.value)) { return true; } return false;

It sounds like it might just be a lag in the mouse over rendering, but the console.log returning an empty value is puzzling. Does this behavior change when you type in more or delete and re-type?

If you are able to capture any of the behavior in a screen shot or screen recoding that would be very helpful to debug!

5

@Wei_Chen , sorry for late reply.

function identicalStudent(row) {
    console.log('First Name Input Value:', first_name_input.value);
    console.log('Last Name Input Value:', last_name_input.value);
    console.log('Birthday Input Value:', bday_input.value);
    
    if (compareString(row.F_Name, first_name_input.value)) {
        if (compareString(row.L_Name, last_name_input.value)) {
            if (compareDate(row.Bday, bday_input.value)) {
                return true;
            }
        }
    }
    return false;
}

Use this code and see what console shows , By this you can debug the code and condition that where the issue begin.

If any other question you have feel free to ask.

1 Like