Question

I have tried to create a variable oldValue and then if the current value === "" then it will change back to the oldValue and because I am using a for loop I can explicitly say what the value is.

The code is changing the div around the input element thats why there is .parentNode‘s

Can anyone tell me how is it possible to get the value of input and save it, or where I have gone wrong in my code.

var inputFocus = function(){
var inputs = document.getElementsByClassName("inputNoFocus");
for (i = 0; i < inputs.length; i++){
    var input = inputs[i];
    var oldValue = this.value;

    input.addEventListener("focus", function(){

        if(this.value === this.value){
            this.value = "";
        }
        this.parentNode.parentNode.setAttribute("class", "inputFocus");
    }, false);

    input.addEventListener("blur", function(){
        if(this.value === ""){
            this.value = oldValue;
        }
        this.parentNode.parentNode.setAttribute("class", "noHover");
    }, false);
}
}();

Answer 1

Try this:

(function() {
  var inputs = document.getElementsByClassName("inputNoFocus");

  function setEmptyVal() {
    if (this.value == this.defaultValue) this.value = "";
    this.parentNode.parentNode.setAttribute("class", "inputFocus");
  }

  function setDefaultVal() {
    if (this.value == "") this.value = this.defaultValue;
    this.parentNode.parentNode.setAttribute("class", "noHover");
  }

  for (i=0; i<inputs.length; i++) {
    var input = inputs[i];

    input.defaultValue = input.value;
    input.addEventListener("focus", setEmptyVal, false);
    input.addEventListener("blur", setDefaultVal, false);
  }
})();

Here’s the fiddle.