按ID选择div并复制js中的内容

Question

我正在制作一个简单的降价编辑器，我想在右侧有一个按钮来复制输出。我不明白为什么下面的代码不起作用，我尝试了许多变体以及其他一些方法。知道如何让第二个按钮工作吗？copyMD 工作正常。JSfunction copyMD() {    document.querySelector("button").onclick = function() {        document.querySelector("textarea").select();        document.execCommand('copy');    };}function copyOP() {    document.querySelector("button").onclick = function() {        document.getElementById("output").select();        document.execCommand('copy');    };}HTML<div class="markdown-editor">    <div class="markdown-editor_left-panel">        <textarea bind:value={source} name="source" class="markdown-editor_source"></textarea>    </div>    <div class="markdown-editor_right-panel">        <div class="markdown-editor_output" id="output">{@html markdown}</div>    </div></div><div class="buttons">    <button class="btn" on:click={copyMD}>Copy Markdown</button>    <button class="btn" id="btn2" on:click={copyOP}>Copy Output</button></div>

Answer 1

我稍微更改了您的代码 - 但以下内容可能会对您有所帮助。运行代码片段。

请注意，我更改了在 html 中调用回调的方式。你可能想把它改回苗条。

更新：您的代码出了什么问题

您附加到按钮的回调本身就是将回调附加到按钮。我对 svelte 了解不多，但我知道这一点：在你的回调中，你得到一个按钮的引用，然后附加一个回调。这似乎是错误的。您应该在任何函数调用之外附加javascript中的回调，以便在javascript脚本加载时附加它，或者将它附加在html中 - 这是一个更好的选择，也是我在这里所做的。同样，在您附加到 html 按钮的回调中，您正在将回调附加到按钮。那有意义吗？

function copyMD(){

     document.querySelector("textarea").select();

     document.execCommand('copy');

}

function copyOP(){

// apparently select only works for text area and docment.execCommand I think it deprecated.

    const output = document.getElementById("output").innerHTML;

// the navigator object in a browser holds lots of useful utilities, such as location services and clipboard interface.

    const theClipboard = navigator.clipboard;

// write text returns a promise, so use `then` to react to success

    theClipboard.writeText(output).then(() => console.log('copied to clipboard'));

}

<div class="markdown-editor">

    <div class="markdown-editor_left-panel">

        <textarea bind:value={source} name="source" class="markdown-editor_source"></textarea>

    </div>

    <div class="markdown-editor_right-panel">

        <div class="markdown-editor_output" id="output">{@html markdown}</div>

    </div>

</div>

<div class="buttons">

    <!-- I change this to onclick so it would work in stack overflow, perhaps you can put this back to svelte syntax -->

    <button class="btn" onclick="copyMD()">Copy Markdown</button>

    <!-- I change this to onclick so it would work in stack overflow, perhaps you can put this back to svelte syntax -->

    <button class="btn" id="btn2" onclick="copyOP()">Copy Output</button>

</div>

Answer 2

.select仅适用于文本区域。您可以在 div 元素上使用 innerHTML 来获取其内容