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

Question

我正在制作一个简单的降价编辑器，我想在右侧有一个按钮来复制输出。我不明白为什么下面的代码不起作用，我尝试了许多变体以及其他一些方法。

知道如何让第二个按钮工作吗？copyMD 工作正常。

JS

function 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(){&nbsp; &nbsp; &nbsp;document.querySelector("textarea").select();&nbsp; &nbsp; &nbsp;document.execCommand('copy');}function copyOP(){// apparently select only works for text area and docment.execCommand I think it deprecated.&nbsp; &nbsp; const output = document.getElementById("output").innerHTML;// the navigator object in a browser holds lots of useful utilities, such as location services and clipboard interface.&nbsp; &nbsp; const theClipboard = navigator.clipboard;// write text returns a promise, so use `then` to react to success&nbsp; &nbsp; theClipboard.writeText(output).then(() => console.log('copied to clipboard'));}<div class="markdown-editor">&nbsp; &nbsp; <div class="markdown-editor_left-panel">&nbsp; &nbsp; &nbsp; &nbsp; <textarea bind:value={source} name="source" class="markdown-editor_source"></textarea>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="markdown-editor_right-panel">&nbsp; &nbsp; &nbsp; &nbsp; <div class="markdown-editor_output" id="output">{@html markdown}</div>&nbsp; &nbsp; </div></div><div class="buttons">&nbsp; &nbsp; <!-- I change this to onclick so it would work in stack overflow, perhaps you can put this back to svelte syntax -->&nbsp; &nbsp; <button class="btn" onclick="copyMD()">Copy Markdown</button>&nbsp; &nbsp; <!-- I change this to onclick so it would work in stack overflow, perhaps you can put this back to svelte syntax -->&nbsp; &nbsp; <button class="btn" id="btn2" onclick="copyOP()">Copy Output</button></div>

Answer 2

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