Javascript mouseout if got id show, if not write "no id"

Question

I've got 2 divs with two different id ;

mainid
infoid

I need that when I mouseout #mainid div innerHTML text on #infoid with first divs would show up.

Full code

function myFunction() {

    var x = document.getElementById("dom").id;


     document.getElementById("info").innerHTML = x;


 
 
}

html, body {height:100%;
margin:0;
padding:0;}



h2, h3 {
 margin:0px;
 text-align:center;
 padding-top:25px;
}


.cc:nth-child(odd) .first-line {background-color: #CCC;
color:red;}
p {text-align:center;
margin:0;
padding:5px;
color:#fff;}

.box5 {text-align:center;
}
.box5 .first-line {
 padding:0px;
 margin:0px;
}
.box5 .second-line {
 padding:0px;
 margin:0px;
}
.box5 img {
 padding-top:3px;
 padding-bottom:3px;
 padding-right:10px;
 padding-left:10px;
 margin:5px;
 border: 3px solid #0B0B3B;
 outline:3px solid #F4FA58;
 display:inline-block;
 
 
}

.imgs {width:50px;height:50px;}

@media screen and (min-width: 769px){
 .box1 {height:50%;
 width:30%;
 float:left;
 background-color:#81DAF5;}
  .box2 {height:10%;
 width:70%;
 float:right;
 background-color:#81F781;}
   .box3 {height:20%;
 width:15%;
 float:left;
 background-color:#5858FA;}
 .box4 {height:20%;
 width:55%;
 float:right;
 background-color:#F4FA58;}
 .box5 {height:20%;
 width:70%;
 float:right;
 background-color:#FAAC58;}
 .box6 {height:40%;
 width:15%;
 float:left;
 background-color:#A0522D;}
 .box7 {height:40%;
 width:35%;
 float:left;
 background-color:#FA5858;}
 .box8 {height:40%;
 width:50%;
 float:right;
 background-color:#fff;}
 .box9 {height:10%;
 width:100%;
 float:left;
 background-color:#000;}
}



@media screen and (max-width: 768px) {
 .box2:hover  {
  animation-name:scale;
  -webkit-animation-name: scale; 
  -webkit-animation: scale 0.5s linear infinite;
    -webkit-animation-duration: 0.5s; 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
}
 @-webkit-keyframes scale {
    from {
   
    
       webkit-transform:scale(1)
    }
    to { 
    webkit-transform:scale(0);
 webkit-background-color:red;
    }
}

@keyframes scale {
 
 
    from {
      
    transform:scale(1)
    }
    to { 
   
  transform:scale(0);
  background-color:red;
    }
}

.box5:hover  {
  animation-name:rotate;
  -webkit-animation-name: rotate; 
  -webkit-animation: rotate 0.5s linear infinite;
    -webkit-animation-duration: 0.5s; 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
}
 @-webkit-keyframes rotate{
    from {
   
    
       webkit-transform:rotatex(0deg);
    }
    to { 
    webkit-transform:rotatex(360deg);
 
    }
}

@keyframes rotate {
 
 
    from {
      
    transform:rotatex(0deg);
    }
    to { 
   
  transform:rotatex(360deg);
    }
}



.box3 h3  {
  animation-name:scaletext;
  -webkit-animation-name: scaletext; 
  -webkit-animation: scaletext 0.5s linear infinite;
    -webkit-animation-duration: 0.5s; 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
   -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}
 @-webkit-keyframes scaletext{
    from {
      0%   {webkit-font-size:12px;}
    25%  {webkit-font-size:8px;}
    50%  {webkit-font-size:16px;}
    100% {webkit-font-size:11px;}
    }
    
}

@keyframes scaletext {
 
    0%   {font-size:12px;}
    25%  {font-size:8px;}
    50%  {font-size:16px;}
    100% {font-size:11px;}
}
 
 .box1 {height:50%;
 width:50%;
 float:left;
 background-color:#81DAF5;}
 .box2 {height:10%;
 width:50%;
 float:right;
 background-color:#81F781;}
 .box3 {height:20%;
 width:50%;
 float:left;
 background-color:#5858FA;}
 .box4 {
 display:none;
 height:0px;
 width:0px;}
 .box5 {height:20%;
 width:50%;
 float:right;
 background-color:#FAAC58;}
 .box6 {display:none;}
 .box7 {height:40%;
 width:20%;
 float:left;
 background-color:#FA5858;}
 .box8 {height:40%;
 width:80%;
 float:right;
 background-color:#fff;}
 .box9 {height:10%;
 width:100%;
 float:left;
 background-color:#000;}
}

<div class="box1 cc" id="info">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box2 cc">
<h3 class="first-line">Pirma eilutė</h2>
</div>

<div class="box3 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box4 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box5 cc">
<img class="imgs">
<img class="imgs">
<img class="imgs">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>

</div>

<div class="box6 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box7 cc"  id="dom" onmouseout='myFunction()'>
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>

<div class="box8 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="first-line">Antra eilutė</h3>
</div>

<div class="box9 cc">
<h3 style="color:#fff;" class="first-line">Pirma eilutė</h2>

The problem is that I can't make something that would write if there is no id.

Maby someone can help me making if else statement in this javascript ?

If got div {code} Else {write : no id}

So there are multiple divs and when you mouseout of one it should either show the id or "no id"? — tobifasc, Dec 04 '17 at 13:22
You could reference all divs using `document.getElementsByTagName("div");` and to add the mouseout eventlistener to each element use something from here: https://stackoverflow.com/questions/12362256/addeventlistener-on-nodelist — tobifasc, Dec 04 '17 at 13:38

score 0 · Answer 1 · answered Dec 04 '17 at 13:38

function mouseOutFunc(element) {
  document.getElementById('info').innerHTML = element.id || "No Id";
}

<div id="info"></div>
<div id="div1" onmouseout="mouseOutFunc(this)">ONE</div>
<div id="div2" onmouseout="mouseOutFunc(this)">TWO</div>
<div onmouseout="mouseOutFunc(this)">NO ID</div>

Try this

Javascript mouseout if got id show, if not write "no id"

1 Answers1