Javascriptのmou​​seoutが表示されている場合、表示されていない場合は「no id」と表示されます

Question

2つの異なるIDを持つ2つのdivがあります。

1. がinfoid

をmainid私が最初のdivと#infoid上#mainidのdivのinnerHTMLのテキストをマウスアウト時に現れるであろうことが必要です。

全コード

function myFunction() { 
 

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

 

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

 

 
    
 
\t 
 
}

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

 

 

 
h2, h3 { 
 
\t margin:0px; 
 
\t text-align:center; 
 
\t 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 { 
 
\t padding:0px; 
 
\t margin:0px; 
 
} 
 
.box5 .second-line { 
 
\t padding:0px; 
 
\t margin:0px; 
 
} 
 
.box5 img { 
 
\t padding-top:3px; 
 
\t padding-bottom:3px; 
 
\t padding-right:10px; 
 
\t padding-left:10px; 
 
\t margin:5px; 
 
\t border: 3px solid #0B0B3B; 
 
\t outline:3px solid #F4FA58; 
 
\t display:inline-block; 
 
\t 
 
\t 
 
} 
 

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

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

 

 

 
@media screen and (max-width: 768px) { 
 
\t .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; 
 
} 
 
\t @-webkit-keyframes scale { 
 
    from { 
 
    
 
    
 
     webkit-transform:scale(1) 
 
    } 
 
    to { 
 
    webkit-transform:scale(0); 
 
\t webkit-background-color:red; 
 
    } 
 
} 
 

 
@keyframes scale { 
 
\t 
 
\t 
 
    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; 
 
} 
 
\t @-webkit-keyframes rotate{ 
 
    from { 
 
    
 
    
 
     webkit-transform:rotatex(0deg); 
 
    } 
 
    to { 
 
    webkit-transform:rotatex(360deg); 
 
\t 
 
    } 
 
} 
 

 
@keyframes rotate { 
 
\t 
 
\t 
 
    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; 
 
\t -webkit-animation-delay: 3s; 
 
    animation-delay: 3s; 
 
} 
 
\t @-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 { 
 
\t 
 
\t 0% {font-size:12px;} 
 
    25% {font-size:8px;} 
 
    50% {font-size:16px;} 
 
    100% {font-size:11px;} 
 
} 
 
\t 
 
\t .box1 {height:50%; 
 
\t width:50%; 
 
\t float:left; 
 
\t background-color:#81DAF5;} 
 
\t .box2 {height:10%; 
 
\t width:50%; 
 
\t float:right; 
 
\t background-color:#81F781;} 
 
\t .box3 {height:20%; 
 
\t width:50%; 
 
\t float:left; 
 
\t background-color:#5858FA;} 
 
\t .box4 { 
 
\t display:none; 
 
\t height:0px; 
 
\t width:0px;} 
 
\t .box5 {height:20%; 
 
\t width:50%; 
 
\t float:right; 
 
\t background-color:#FAAC58;} 
 
\t .box6 {display:none;} 
 
\t .box7 {height:40%; 
 
\t width:20%; 
 
\t float:left; 
 
\t background-color:#FA5858;} 
 
\t .box8 {height:40%; 
 
\t width:80%; 
 
\t float:right; 
 
\t background-color:#fff;} 
 
\t .box9 {height:10%; 
 
\t width:100%; 
 
\t float:left; 
 
\t 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>

問題は、私はIDがない場合は、書き込みと何かを作ることができないということです。

Maby誰かがこのjavascriptのelse文を作ってくれますか？

だのdivエルス{コード} 場合{書き込み：なしID}

Answer 1

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>

この