Change display property of a <div> by clicking on an <input>

Question

I’m working on a contact form that when the person clicks on <input> there appears a <div> by the side, mentioning some things the person should do. Ex: Enter your email here.

How to make the property aggregate display:block in <div>'s:

<div class="tooltip.right">

By clicking on <input>s:

<input class="form-control">

Note: When the person clicks outside the <input> alters to display:none. Pure Javascript.

Answer 1

Your question has become too vague, I’m not sure if the input points to a specific div, whether you will have multiple inputs and multiple Ivs.

Yet the answer would be something like:

You can use the property .style or . classname`:

1. style:

       window.onload = function() {
            var div = document.querySelector("div[class='tooltip.right']");
            var input = document.querySelector(".form-control");
   
            input.onclick = function() {
                 div.style.display = "block";
            };
   
            input.onblur = function() {
                 div.style.display = "none";
            };
       };

       div[class="tooltip.right"] {
             display: none;
       }

       <input class="form-control">
       <div class="tooltip.right">Olá mundo</div>

2. classname:

       window.onload = function() {
            var hideClass = /(^|\s)hide(\s|$)/;
   
            var div = document.querySelector("div[class*='tooltip.right']");
            var input = document.querySelector(".form-control");
   
            input.onclick = function() {
                 div.className = div.className.replace(hideClass, " ");
            };
   
            input.onblur = function() {
                 div.className += " hide";
            };
       };

       .hide {
             display: none;
       }

       <input class="form-control">
       <div class="tooltip.right hide">Olá mundo</div>

Note:

I recommend not using point classes class="tooltip.right", the point is a delimiter to identify the classes in the CSS selectors, it would be better something like:

<div class="tooltip.right hide">Olá mundo</div>

Or if you’re using the point as separator and tooltip and right are two different classes, then the correct one to separate in HTML is space, like this:

<div class="tooltip right hide">Olá mundo</div>