javascript 使用“this”选择元素的innerText

我是个初学者，所以如果我错过了一些明显的东西，我道歉。
我正在尝试编写一个简单的web应用程序，当你在文本区域输入文本并点击按钮时，就会创建一个“卡片”（div），将该文本区域的值作为其innerText。当你点击卡片时，它的innerText就会被复制到剪贴板中。
当我这样写出函数时，它就可以工作了：

el.setAttribute(
      "onclick",
      "console.log(navigator.clipboard.writeText(this.innerText));"
    );

但是如果我单独写出函数并在设置属性时调用它，undefined就被复制到键盘上：

el.setAttribute("onclick", "copyText()");

我会坚持第一个选择，工作的选择，除了两件事：
1.主要是我只是想学习，所以因为不理解而回避困难是没有意义的。
1.我想给copyText（）函数添加更多行代码，这样它也能在移动的设备上工作，我能用第一种方法做到吗？
下面是我的完整代码：

const app = document.getElementById("app");

function createCard() {
  let input = document.getElementById("textarea").value;
  if (input == "") {
    console.log("You must enter text to create a card.");
  } else {
    const el = document.createElement("div");
    el.innerText = document.getElementById("textarea").value;
    el.setAttribute("class", "item card");
    el.setAttribute("onclick", "copyText()");
    app.appendChild(el);
    document.getElementById("textarea").value = "";
  }
}

function copyText() {
  navigator.clipboard.writeText(this.innerText);
}

我希望它的工作方式与下面的代码完全相同，但事实并非如此，它返回undefined。

const app = document.getElementById("app");

function createCard() {
  let input = document.getElementById("textarea").value;
  console.log(input);
  if (input == "") {
    console.log("You must enter text to create a card.");
  } else {
    const el = document.createElement("div");
    el.setAttribute("class", "item card");
    el.setAttribute(
      "onclick",
      "console.log(navigator.clipboard.writeText(this.innerText));"
    );
    el.innerText = document.getElementById("textarea").value;
    app.appendChild(el);
    document.getElementById("textarea").value = "";
  }
}

我怀疑这是“this”和范围的问题，但我想不出来。再次抱歉-我知道这是一个初学者的问题。谢谢你的帮助。

调用copyText()时不使用this context。

el.setAttribute("onclick", "copyText.call(this)");
// ideally also pass the event object:
el.setAttribute("onclick", "copyText.call(this, event)");

但是，the best practice is to install an event handler function instead of using the onclick attribute，所以您应该这样做

el.onclick = copyText;
// or
el.addEventListener("click", copyText);

注意这些引用的是作用域中的copyText函数，它不需要是全局变量。

const input = document.getElementById("textarea");
const app = document.getElementById("app");
function createCard() {
  console.log(input.value);
  if (!input.value) {
    console.log("You must enter text to create a card.");
  } else {
    const el = document.createElement("div");
    el.className = "item card";
    el.onclick = function() {
      console.log(navigator.clipboard.writeText(this.textContent));
    };
    el.textContent = input.value;
    app.appendChild(el);
    input.value = "";
  }
}

javascript 使用“this”选择元素的innerText

1条答案

相关问题

热门标签

最新问答