离开 JsFiddle 环境时，JSFiddle 代码不能运行

Question

我的简单反网络欺凌插件代码在 JSFiddle 中完美运行，但在我的网站中却没有运行，即使我添加 document.ready 并使用像 jslint 这样的 c+p 清理器.该代码在 JSFiddle 上没有任何警告。我查看了此页面：(JSFiddle code not working in my own page)，但这似乎不适用于我的问题。为什么代码在 JSFiddle 上运行时在其他环境中不运行？

这是 JSFiddle： The Code

这是我在我的网站中使用的确切 JS：

$(document).ready(function() {
  var triggerWords = ["stupid",
    "ugly",
    "fat",
    "kill",
    "dumb",
    "idiot",
    "freak",
  ];
  $(document).on('keyup', 'textarea', function humhm {
    for (var i = 0; i < triggerWords.length; i++) {
      if ($(this).val().toLowerCase().indexOf(triggerWords[i]) != -1) {

        document.getElementById("styled").className = "mystyle";
        document.getElementById("shover").className = "mason";
        const messages = ['<img src="https://lh3.googleusercontent.com/TzOBj6xt9unc8n41fMyUZ46FG4MRXBK6wkdOtzmKJPoLa9gBYNwZYQkRB8fsboqM1LHh3ahxOLOlyKsH1zG1qmGHgbS6IK-yZtv6Duo6_thwIKEVRY7BZNr2JJzAkYviyKp_q7SPWnp1"width="200px" class="floater" onclick="javascript:eraseText();">Words mean a lot. Their echoes can brighten someone\'s day. Or they can make a bad day worse. Consider the person behind the screen.', '<img src="https://lh3.googleusercontent.com/TzOBj6xt9unc8n41fMyUZ46FG4MRXBK6wkdOtzmKJPoLa9gBYNwZYQkRB8fsboqM1LHh3ahxOLOlyKsH1zG1qmGHgbS6IK-yZtv6Duo6_thwIKEVRY7BZNr2JJzAkYviyKp_q7SPWnp1"width="200px" class="floater" onclick="javascript:eraseText();">Your words can be a force for happiness or dejection. Choose carefully.', 'Be mindful of your words. Would you say this in real life?', 'Consider the impact your words may have. A couple insults slung casually can be much more significant to others.', 'Words that are insignificant to you can deeply hurt another. Be empathetic. Be nice.'];
        const randomIndex = Math.round(Math.random(messages.length * 10 - 0.5));
        document.getElementById("shover").innerHTML = messages[randomIndex];
        document.getElementById("usual").className = "noshow";
        document.getElementById("trigger").className = "norm";
      }
    }
  });


});
'

Answer 1

您要导入 JQuery 吗？通常 'rare' 错误来自简单问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我建议您利用 JQuery 让您的代码更易于阅读，您可以将所有 document.getElementById("ID_VALUE") 替换为 $('#ID_VALUE')

PD：祝你反网络欺凌好运。重要的东西。

Answer 2

您需要导入 jQuery。

JSFiddle 确实导入了它。

离开 JsFiddle 环境时，JSFiddle 代码不能运行

JSFiddle code cannot run when out of JsFiddle environment

javascript

css

jsfiddle

离开 JsFiddle 环境时，JSFiddle 代码不能 运行

JSFiddle code cannot run when out of JsFiddle environment

javascript

css

jsfiddle

离开 JsFiddle 环境时，JSFiddle 代码不能运行