Javascriptがユーザーが、私は問題を抱えているし、解決策を見つけることができない要素

Question

https://gyazo.com/aa49eb6d6849b3adabb8924aa9e40594

こんにちはみんな、

を選択してみましょう。私はダイアグラムに要素を持っていますが、ユーザーがテキストを追加するセミコラムを追加する要素を選択できるようにしたいのですが、要素を選択してその選択に従って追加する方法はわかりません。 ご協力いただきありがとうございます。代わりにaddDetailがクリックされたときに、すべての句の要素を毎回検索する

var addDetail = document.getElementById('addDetail'); 
var clauseInput = document.getElementsByClassName('clause'); 
document.addEventListener('click', function(e) { 
     e = e || window.event; 
     var target = e.target || e.srcElement; 
     if(target == clauseInput[0] || target == clauseInput[1] || 
      target == clauseInput[2] || target == clauseInput[3] || 
      target == clauseInput[4] || target == addDetail) { 
      document.getElementById('addDetail').style.display='inline-block'; 
      // createDetail(); 
      console.log(target); 
     } else { 
      document.getElementById('addDetail').style.display='none'; 
     } 
}, false); 

Answer 1

更新

は、e.relatedTargetがあることが本当にあなたの問題、detailed documentationに適した、および更新スニペット：

/*CREATE TOP AND BOTTOM CLAUSES*/ 
 
/*Top Clauses*/ 
 
const addClauseTop = document.querySelector('#addClauseTop'); 
 
var targetClauseElement; 
 
var addDetail = document.getElementById('addDetail'); 
 
addDetail.addEventListener('focusin', function(e) { 
 
    createDetail(e.relatedTarget); 
 
}); 
 

 
window.addEventListener('mouseup',function(e) { 
 
\t if (e.currentTarget != addDetail) { 
 
\t \t \t addDetail.style.display='none'; 
 
\t } 
 
}); 
 

 

 
var firstTopClause = document.getElementsByClassName('clause')[0]; 
 
firstTopClause.addEventListener('click', function(e) { 
 
    addDetail.style.display='inline-block'; 
 
}); 
 

 
var firstBottomClause = document.getElementsByClassName('clauseDivReverse')[0]; 
 
firstBottomClause.addEventListener('click', function(e) { 
 
    addDetail.style.display='inline-block'; 
 
}); 
 

 

 

 
addClauseTop.addEventListener('click',function(e){ 
 
\t e.preventDefault(); 
 
\t //Get Divs-Overlay 
 
\t const topDivs = document.querySelector('#topClauses'); 
 
\t const bottomDivs = document.querySelector('#bottomClauses'); 
 

 
\t // Create Elements 
 
\t const clauseDiv = document.createElement('div'); 
 
\t const clauseText = document.createElement('input'); 
 
\t const clauseStroke = document.createElement('div'); 
 
    
 
\t // // //Give Style 
 
\t clauseDiv.classList.add('clauseDiv'); 
 
    clauseDiv.addEventListener('click', function(e) { 
 
    addDetail.style.display='inline-block'; 
 
    }); 
 
\t clauseText.classList.add('clause'); 
 
\t clauseText.setAttribute("id", "clause"); 
 
\t clauseStroke.classList.add('strokeClause'); 
 
    // 
 
\t // // Append to document 
 
\t clauseDiv.appendChild(clauseText); 
 
\t clauseDiv.appendChild(clauseStroke); 
 
\t topDivs.appendChild(clauseDiv); 
 
\t document.body.appendChild(topDivs); 
 
\t document.body.appendChild(bottomDivs); 
 
    
 
}) 
 
/*BOTTOM Clauses*/ 
 
const addClauseBottom = document.querySelector('#addClauseBottom'); 
 
addClauseBottom.addEventListener('click',function(e){ 
 
\t e.preventDefault(); 
 
\t //Get Divs-Overlay 
 
\t const topDivs = document.querySelector('#topClauses'); 
 
\t const bottomDivs = document.querySelector('#bottomClauses'); 
 

 
\t // Create Elements 
 
\t const clauseDiv = document.createElement('div'); 
 
    clauseDiv.addEventListener('click', function(e) { 
 
    targetClauseElement = e.currentTarget; 
 
    addDetail.style.display='inline-block'; 
 
    }); 
 
\t const clauseText = document.createElement('input'); 
 
\t const clauseStroke = document.createElement('div'); 
 

 
\t // // //Give Style 
 
\t clauseDiv.classList.add('clauseDivReverse'); 
 
\t clauseText.classList.add('clauseReverse'); 
 
\t \t clauseText.setAttribute("id", "clauseReverse"); 
 
\t clauseStroke.classList.add('strokeClauseReverse'); 
 
    // 
 
\t // // Append to document 
 
\t clauseDiv.appendChild(clauseText); 
 
\t clauseDiv.appendChild(clauseStroke); 
 
\t bottomDivs.appendChild(clauseDiv); 
 
\t document.body.appendChild(bottomDivs); 
 
}) 
 
/***********/ 
 

 

 

 
//Create a addDetail 
 
function createDetail(target){ 
 

 
     var mainColumn = target.parentElement; 
 
     var strokeColumn = mainColumn.children[1]; 
 
     // Create Elements 
 
     var levelOneDiv = document.createElement('div'); 
 
     var levelOneText = document.createElement('input'); 
 

 
     if (mainColumn.classList.contains('clauseDiv')) { 
 
     \t levelOneDiv.classList.add('levelOneClauseReverse'); 
 
     levelOneText.classList.add('levelOneTextReverse'); 
 
     //I thought you have not completed your style yet, like something levelOneClause class 
 
     } else { 
 
     levelOneDiv.classList.add('levelOneClauseReverse'); 
 
     levelOneText.classList.add('levelOneTextReverse');   
 
     } 
 

 
     levelOneDiv.appendChild(levelOneText); 
 
     strokeColumn.appendChild(levelOneDiv); 
 

 
    }

@import url('https://fonts.googleapis.com/css?family=Vollkorn+SC'); 
 

 
body{ 
 
\t margin: 10%; 
 
\t margin-right: 15%; 
 
\t margin-left: 10%; 
 
\t margin-top: 5%; 
 
} 
 
h1{ 
 
\t color: #3B3C3D; 
 
\t font-family: 'Vollkorn SC', serif; 
 
\t font-size: 2em; 
 
\t text-align:center; 
 
} 
 
h2{ 
 
\t color: #3B3C3D; 
 
\t font-family: 'Vollkorn SC', serif; 
 
\t font-size: 1.5em; 
 
\t text-align:center; 
 
} 
 
#bottomClauses{ 
 
\t clear: both; 
 
\t float: right; 
 
} 
 
/*CONTROL-PANEL*/ 
 
#controlPanel{ 
 
\t float: inline-block; 
 
\t margin-top: 5%; 
 
\t margin-left: 20%; 
 
\t margin-right: 20%; 
 
\t margin-bottom: 15%; 
 
\t padding-bottom: 2%; 
 
\t border-radius: 10%; 
 
\t border-bottom: 0.1vw solid #3B3C3D; 
 
} 
 
.addClause{ 
 
\t background-color: #2c3e50; 
 
\t margin-top: 5%; 
 
\t font-size: 0.75em; 
 
\t padding: 0.5em; 
 
\t border: 0; 
 
\t color: #FFF; 
 
} 
 
.addClause:hover{ 
 
\t cursor: pointer; 
 
\t background-color: #000; 
 
} 
 
.addDetail{ 
 
\t display: none; 
 
\t background-color: #2c3e50; 
 
\t margin-top: 5%; 
 
\t font-size: 0.75em; 
 
\t padding: 0.5em; 
 
\t border: 0; 
 
\t color: #FFF; 
 
} 
 
.addDetail:hover{ 
 
\t cursor: pointer; 
 
\t background-color: #000; 
 
} 
 
/*FISHBONE*/ 
 
#fishBone{ 
 
\t position: relative; 
 
\t float:right; 
 
\t top: 19.75vw; 
 
\t width: 100%; 
 
\t height: 0.2vw; 
 
\t background-color: #34495e; 
 
} 
 
#finalResult{ 
 
\t position: absolute; 
 
\t /*float:right;*/ 
 
\t left: 83.5vw; 
 
\t top: 44.25vw; 
 
\t width: 7.5vw; 
 
\t height: 7.5vw; 
 
\t padding: 1vw; 
 
\t text-align: center; 
 
\t color: #FFF; 
 
\t background-color: #7f8c8d; 
 
\t border-radius: 50%; 
 
\t border: 0.15vw solid #34495e; 
 
} 
 
/*NEW CLAUSE*/ 
 
.clauseDiv{ 
 
\t display: inline-block; 
 
\t float:right; 
 
\t width: 5vw; 
 
\t margin-right: 12.5vw; 
 
} 
 
.clause{ 
 
\t float: inline-block; 
 
\t position: relative; 
 
\t top: -3.5vw; 
 
\t right: 2vw; 
 
\t text-align: center; 
 
\t width: 5.8vw; 
 
\t height: 1.5vw; 
 
\t padding: 0.2vw; 
 
\t color: #FFF; 
 
\t background-color: #3498db; 
 
\t border-radius: 0.15vw; 
 
\t border: 0; 
 
} 
 
.strokeClause{ 
 
\t position: relative; 
 
\t top: -5.75vw; 
 
\t transform: rotate(-25deg); 
 
\t background-color: #34495e; 
 
\t width: 0.1vw; 
 
\t height: 25vw; 
 
\t margin-left: 7.5vw; 
 
\t border: 0.05vw solid #34495e; 
 
\t border-radius: 0.1vw; 
 
\t float: inline-block; 
 
\t z-index: -1; 
 
} 
 
/*NEW CLAUSE REVERSE*/ 
 
.clauseDivReverse{ 
 
\t float: inline-block; 
 
\t float:right; 
 
\t width: 5vw; 
 
\t margin-right: 12.5vw; 
 
} 
 
.clauseReverse{ 
 
\t position: relative; 
 
\t top: 15.5vw; 
 
\t right: 2.5vw; 
 
\t float: inline-block; 
 
\t text-align: center; 
 
\t width: 5.8vw; 
 
\t height: 1.5vw; 
 
\t padding: 0.2vw; 
 
\t color: #FFF; 
 
\t background-color: #3498db; 
 
\t border-radius: 0.15vw; 
 
\t border: 0; 
 
} 
 
.strokeClauseReverse{ 
 
\t position: relative; 
 
\t top: -9.75vw; 
 
\t transform: rotate(25deg); 
 
\t background-color: #34495e; 
 
\t width: 0.1vw; 
 
\t height: 25vw; 
 
\t margin-left: 7.5vw; 
 
\t border: 0.05vw solid #34495e; 
 
\t border-radius: 0.1vw; 
 
\t float: inline-block; 
 
\t z-index: -1; 
 
} 
 
/*NEW LEVEL ONE*/ 
 
.levelOneClauseReverse{ 
 
\t margin-bottom: 5vw; 
 
} 
 
.levelOneTextReverse{ 
 
\t border: 0; 
 
\t position: relative; 
 
\t font-size: 0.75vw; 
 
\t width: 13vw; 
 
\t top: 4.5vw; 
 
\t right: 12.75vw; 
 
\t border-bottom: 0.1vw solid #34495e; 
 
\t transform: rotate(-25deg); 
 
}

<body> 
 
\t \t <h1>Diagram Editor</h1> 
 
\t \t <div id='controlPanel'> 
 
\t \t \t <h2>Control Panel</h2> 
 
\t \t \t <input type='submit' name='addClause' value='Clause on TOP' class='addClause' id='addClauseTop'> 
 
\t \t \t <input type='submit' name='addClause' value='Clause on BOTTOM' class='addClause' id='addClauseBottom'> 
 
\t \t \t <input type='submit' name='addClause' value='Add Detail' class='addDetail' id='addDetail'> 
 
\t \t </div> 
 
\t \t <div id='fishBone'></div> 
 
\t \t \t <input type='text' name='clause' id='finalResult'> 
 
\t \t <div id='topClauses'> 
 
\t \t \t <div class='clauseDiv'> 
 
\t \t \t \t <input class='clause' id='clause'> 
 
\t \t \t \t <div class='strokeClause'> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id='bottomClauses'> 
 
\t \t \t <div class='clauseDivReverse' > 
 
\t \t \t \t <input class='clauseReverse clause'> 
 
\t \t \t \t <div class='strokeClauseReverse'> 
 
\t \t \t \t \t <div class='levelOneClauseReverse'> 
 
\t \t \t \t \t \t \t <input class='levelOneTextReverse'> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class='levelOneClauseReverse'> 
 
\t \t \t \t \t \t \t <input class='levelOneTextReverse'> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class='levelOneClauseReverse'> 
 
\t \t \t \t \t \t \t <input class='levelOneTextReverse'> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class='levelOneClauseReverse'> 
 
\t \t \t \t \t \t \t <input class='levelOneTextReverse'> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <script src="app.js"></script> 
 
\t </body>