Input fields dead after clearing them

Question

In my electron app I have a function to clear my input fields on a button press, but after using it I can't click and type into inputs anymore. However, if I open up the inspector window, they work again.

Why does this happen and how do I fix it?

Electron app's main.js:

const { app, BrowserWindow, Menu } = require('electron');
let win;

function createWindow() {
    win = new BrowserWindow();
    win.loadFile('window_main/index.html');
}

app.on('ready', createWindow);

index.html

<body>
    <input type="text" id="testinput" />
    <button id="clear">Clear</button>
    <script src="index.js" type="text/javascript"></script>
</body>

The problematic bit of JS in index.js:

document.getElementById('clear').addEventListener("click", clear);

function clear() {
    if (confirm("Clear all inputs?")) {
        document.querySelectorAll('input').forEach((input) => {
            input.value = '';
        })
    }
}

score 0 · Answer 1 · answered Jan 18 '20 at 12:42

0

I reproduced your code after removing the script which is not explained why you are using it, anyhow below is a code using jQuery does the trick, this should get you to the right place at least.. if still didn't work with you post a better explanation of your code for a better help... mark it as answered if it solves your problem....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
        <input type="text" id="testinput" />
        <button id="clear">Clear</button>
<script>
$(document).ready(()=>{
    document.getElementById('clear').addEventListener("click", clear);
})
function clear() {
    if (confirm("Clear all inputs?")) {
        document.querySelectorAll('input').forEach((input) => {
            $(input).val('');
        })
    }
}
</script>
</body>
</html>

answered Jan 18 '20 at 12:42

Kai

185
8

What script did you remove? – Jan Berndt Jan 18 '20 at 12:46
the first part which requires the electron, you can read up, and see which one i removed, if you are not able to use the code i posted kindly post back a better code to enable others read and reproduce your code to fix up the errors, the code i posted for you clears the input of the form on button click, if you inspect well you will be able to use it. – Kai Jan 18 '20 at 13:32
I don't think you completely understood my question. My code works, but the inputs become unusable after it executes. Just rewriting my code to jquery won't help. – Jan Berndt Jan 18 '20 at 13:37
PS hate to be that guy, but you might wanna work on your punctuation. Your comments are difficult to understand. – Jan Berndt Jan 18 '20 at 13:40
@Mike I tried to help, you would need then to post a better code explanation for that, I raised up the vote on your post, sure there are lots of experts here who could help you, it doesn't make us feel good when we try to help others and it doesn't work, we are happy to help – Kai Jan 18 '20 at 13:56

score 0 · Accepted Answer · answered Jan 19 '20 at 11:13

The problem was not clearing the inputs, but rather showing the confirm box. I used the following snippet instead:

dialog.showMessageBoxSync(
    title: "Clear inputs",
    message: "Clear all input boxes?",
    type: "warning",
    buttons: ["Cancel", "Ok"]
})

And now everything works as expected.

Input fields dead after clearing them

2 Answers2