onfocus onblur not working properly?

Question

I am using two Javascript functions, but they seem to not be working correctly when using input onfocus and onblur

Heres what I have:

HTML

<form class="nav" method="post" action="action.php?do=search">
    <input id="sb" class="search_bar" type="text" name="search_input" value="Search" onfocus="removeValue()" onblur"showValue()" />
</form>

Javascript

var sb = document.getElementById("sb").value()

function removeValue() {
    if(sb=="Search") {
        sb="";
    }
    else {}
}
function showValue() {
    if(sb="") {
        sb="Search";
    }
    else {}
}

Answer 1

You are missing = on onblur "showValue()" it should be like onblur="showValue()"

And also var sb = document.getElementById("sb").value; should be inside the funciton eg:-

function removeValue() {
  var sb = document.getElementById("sb").value;
  .......
  .......

function showValue() {
    var sb = document.getElementById("sb").value;
    .........
    ......... 

Answer 2

You need to get the elements value inside the onblur and onfocus functions. The variable you currently have defined takes the value at run time, it's not a reference:

function removeValue() {
    var sb = document.getElementById("sb")
    if(sb.value=="Search") {
        sb.value="";
    }
    else {}
}

function showValue() {
    var sb = document.getElementById("sb")
    if(sb.value="") {
        sb.value="Search";
    }
    else {}
}

I would just make a variable of the element, and then call .value when you want to set and check it.

Answer 3

There's no such function value on the input field, so replace this:

var sb = document.getElementById("sb").value();

with this:

var sb = document.getElementById("sb").value;