HTML onclick()求助，图片和段落在一起？

Question

我希望这个修复起来相对简单。我不确定我做错了什么。我想要 HTML 中的一个按钮来显示一个段落，然后是第二个按钮来组合一个段落和一个图像。它将结果吐到分隔线下方，预先在下方设置了默认值。在看到一些例子后让那部分工作。我也得到了它来组合文本，所以这看起来不错，但是当我尝试粘贴图像时，我什么也得不到。不知道我做错了什么。这是我得到的：

<!DOCTYPE html>
<html>
    <body>
   <p>
     Filler text here.
   </p>
    <input type="button" value="Test 1"
          onclick="document.getElementById('outputDiv').innerHTML=
                     'Testing words.';">
    <input type="button" value="Test 2"
          onclick="document.getElementById('outputDiv').innerHTML=
                     'Testing combining words ' +
                     'and images.' +
                     '<img src="https://lh3.googleusercontent.com/proxy/afg90RRXB-Ah7-9IZZU-uj9iPztl4Y6gDUAtR-02O5jNIcTll2XlDJdXd3AZKtAlRPcBZ_2iZiGJhRvko-k2GOd9FSFuNYw" alt="W3Schools.com">';">
   <hr>
   <div id="outputDiv">
     Testing output.
   </div>
    </body>
</html>

Answer 1

在 onclick 属性中使用 " 而不是 "：

  <p>
     Filler text here.
   </p>
    <input type="button" value="Test 1"
          onclick="document.getElementById('outputDiv').innerHTML=
                     'Testing words.';">
    <input type="button" value="Test 2"
          onclick="document.getElementById('outputDiv').innerHTML=
                     'Testing combining words ' +
                     'and images.' +
                     '<img src=&quot;https://lh3.googleusercontent.com/proxy/afg90RRXB-Ah7-9IZZU-uj9iPztl4Y6gDUAtR-02O5jNIcTll2XlDJdXd3AZKtAlRPcBZ_2iZiGJhRvko-k2GOd9FSFuNYw&quot; alt=&quot;W3Schools.com&quot;>';">
   <hr>
   <div id="outputDiv">
     Testing output.
   </div>

但这真的很丑。用 JavaScript 附加事件监听器怎么样？

const [btn1, btn2] = document.querySelectorAll('input');
const outputDiv = document.getElementById('outputDiv');
btn1.onclick = () => outputDiv.innerHTML = 'Testing words.';
btn2.onclick = () => outputDiv.innerHTML = 'Testing combining words and images.' +
  '<img src="https://lh3.googleusercontent.com/proxy/afg90RRXB-Ah7-9IZZU-uj9iPztl4Y6gDUAtR-02O5jNIcTll2XlDJdXd3AZKtAlRPcBZ_2iZiGJhRvko-k2GOd9FSFuNYw" alt="W3Schools.com">';

<p>
  Filler text here.
</p>
<input type="button" value="Test 1">
<input type="button" value="Test 2"">
<hr>
<div id="outputDiv">
  Testing output.
</div>

我强烈建议尽可能避免使用内联处理程序 - 所需的转义及其疯狂的作用域链使代码比需要的更难读写。

HTML onclick()求助，图片和段落在一起？

HTML onclick() help, image and paragraph together?

html

javascript

onclick