Change display property of a div by clicking an input

Question

Change display property of a div by clicking an input

Navigation

#1 by (5 votes)

-3

I'm working on a contact form where when the person clicks on <input> a <div> appears next to it, mentioning some things that the person should do. Ex: Enter your email here.

How do I add the display:block property to <div> 's:

<div class="tooltip.right">

By clicking the% s of% s:

<input class="form-control">

Note: When the person clicks out of <input> changes to <input> . Javascript pure.

javascript

asked by anonymous 14.08.2016 / 07:31

1 answer

I am creating a game of the three tracks but I can not go to the next question Does not send mail with PHP mailer

score 5 · Accepted Answer

Your question is very vague, I'm not sure if the input points to a specific div, whether it will have multiple inputs and multiple divs.

However the answer would be something like:

You can use the .style or .className 'property:

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>

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 that you do not use classes with point 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 are using the dot as separator and tooltip and right are two different classes, then the correct one to separate in HTML is the space, like this:

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