Question

I’ve found many examples online on how to clear the same text field you click on, but I’d like the user to click on text field 1 and it clear text field 2, and vice versa.

Been struggling on this for hours. The problem I’m having is I’m having no errors, no output, and it doesn’t work. I have no idea what the problem is.

My code:

<jsp:useBean id="speed" class="java.lang.String" scope="request" />
<jsp:useBean id="force" class="java.lang.String" scope="request" />

<script>
    function clearSpeed() {
        var x = document.getElementByID(speed);
        x.value = "";
    }

    function clearForce() {
        var x = document.getElementByID(force);
        x.value = "";
    }
</script>

<input type="text" id="speed" onfocus='clearForce()' value="<%=speed%>">

<input type="text" id="force" onfocus='clearSpeed()' value="<%=force%>">

Answer 1

You need to quote your strings, and JavaScript is case-sensitive – the function is getElementById() :

function clearSpeed() {
    var x = document.getElementById('speed'); // added quotes around the id
    x.value = "";
}

function clearForce() {
    var x = document.getElementById('force'); // added quotes around the id
    x.value = "";
}

Better would be this :

<input type="text" id="speed" onfocus="clearValue('force')" value="<%=speed%>">
<input type="text" id="force" onfocus="clearValue('speed')" value="<%=force%>">

Calls a single function (I also changed the quotes round for better consistency)

Updated JavaScript:

function clearValue(id) {
    var x = document.getElementById(id); // no need for quotes and value passed in as variable
    x.value = "";
}

This promotes re-usable code and less duplication

var x = document.getElementById(id);
x.value = "";

could become (if you really wanted to make it shorter !)

document.getElementById(id).value = "";

There is no need to use a variable, unless of course you want to do other things with the DOM element