对不同的DOM元素使用相同的功能

Question

I have input and text boxes which have different placeholders like "number of reps", "time needed in secs" etc.

<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>

I have built a click event so that whenever any box is clicked, its placeholder becomes blank so user inputs a value like so:

textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);

function checkInput(e){
  e.currentTarget.placeholder="";
} 

^^made a single function that can be used for both textarea and sets

How can I get the placeholder back if the user clicks a box but doesn't type in a value and moves on to another item (blur event) by using a single function for all the items like so:

textarea.addEventListener("blur",originalValue);
reps.addEventListener("blur",originalValue);

function originalValue(e){
    e.currentTarget.placeholder= default value/original value;
}

Answer 1

Try out this textbox

 <input type="text" placeholder="Enter a value"> 

As you can see there is no code whatsoever , and it does exactly what you want; if a user enters any text the placeholder is removed. If the user enters no text (or removes existing text) the placeholder is restored on blur.

I seriously don't understand why you even began to write code around this!

If you just want to confuse your users, take a copy of the placeholder into the element before clearing it and restore it on blur.

 textarea.addEventListener("click",checkInput); sets.addEventListener("click",checkInput); textarea.addEventListener("blur",restore); sets.addEventListener("blur",restore); function checkInput(e){ e.currentTarget.originalPlaceholder = e.currentTarget.placeholder e.currentTarget.placeholder=""; } function restore(e){ e.currentTarget.placeholder = e.currentTarget.originalPlaceholder; } 

 <input type="text" id="sets" placeholder="Number of sets"> <textarea id="textarea" placeholder="write"></textarea> 

I think this is a terrible idea FWIW!