阻止onclick中的下一個孩子

Question

我有這個東西，它將html代碼轉換為textarea中的文本。 問題是，當我單擊html時，我在所有textarea標簽中都得到了相同的代碼。 我想單擊element以獲得僅它的代碼。 這是jsfiddle，可以查看到目前為止我得到的結果。ps單擊圖標以查看左側的代碼。

<!-- Card -->
    <aside>
        <section><textarea class="codeoutput"></textarea></section>
        <section class="codeinput">
            <figure class="card">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="18" cy="5" r="3"></circle>
                    <circle cx="6" cy="12" r="3"></circle>
                    <circle cx="18" cy="19" r="3"></circle>
                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                </svg>
                <h4>Card Simple</h4>
                <figcaption>Lorem ipsum</figcaption>
            </figure>
        </section>
    </aside>
    <!-- Card 2 -->
    <aside>
        <section><textarea class="codeoutput"></textarea></section>
        <section class="codeinput">
            <h2>Hello</h2>
        </section>
    </aside>
    <script>
        var codeinput = document.getElementsByClassName('codeinput')[0];
        var codeoutput = document.getElementsByClassName('codeoutput');
        codeinput.onclick =function () {
            for(var i = 0; i < codeoutput.length; i++) {
                codeoutput[i].innerHTML = codeinput.innerHTML;
            }
        }
    </script>

Answer 1

獲取所有代碼輸入和代碼輸出。 循環遍歷代碼輸入以偵聽onclick事件。 附加了已編輯的JS代碼。

 var codeinput = document.getElementsByClassName('codeinput'); var codeoutput = document.getElementsByClassName('codeoutput'); for (var i = 0; i < codeinput.length; i++) { codeinput[i].onclick = function() { displayOutput(this); } } function displayOutput(input) { for (var i = 0; i < codeinput.length; i++) { if (codeinput[i] == input) codeoutput[i].innerHTML = codeinput[i].innerHTML; } } 

 textarea { font-size: 0.9rem; } section, body, .card { display: flex; flex-direction: column; } section, body, .card { align-items: center; align-content: center; } section, body, .card { justify-content: center; } aside { display: flex; display: grid; grid-template-columns: 50vw 40vw; } section, textarea { width: 100%; min-height: 60vh; } textarea { resize: none; white-space: pre-line; padding: 2rem; border: none; outline: none; } .card { margin: 0; } .card svg { width: 15vmin; height: 15vmin; } body { margin: 0; min-height: 100vh; width: 100vw; margin-top: 20vh; } aside { margin-bottom: 10vh; } section { border: thin solid #E0E0E0; } * { box-sizing: border-box; } /*# sourceMappingURL=output.css.map */ 

 <!-- Card --> <aside> <section><textarea class="codeoutput"></textarea></section> <section class="codeinput"> <figure class="card"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="18" cy="5" r="3"></circle> <circle cx="6" cy="12" r="3"></circle> <circle cx="18" cy="19" r="3"></circle> <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line> <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line> </svg> <h4>Card Simple</h4> <figcaption>Lorem ipsum</figcaption> </figure> </section> </aside> <!-- Card 2 --> <aside> <section><textarea class="codeoutput"></textarea></section> <section class="codeinput"> <h2>Hello</h2> </section> </aside>