在块 onclick 中获取下一个 child

Question

我有这个东西，可以将 html 代码转换为文本区域中的文本。问题是当我点击 html 我在所有文本区域标签中得到相同的代码。我想单击元素以仅获取它的代码。这里 jsfiddle 看看我到目前为止得到了什么 p.s 单击图标查看左侧的代码。

<!-- 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>

在块 onclick 中获取下一个 child

get next child in block onclick

html

javascript

textarea

innerhtml