My code for a simple anti-cyberbullying plugin works perfectly in JSFiddle, but doesn't run in my website, even when I add document.ready and use a c+p cleanser like jslint. The code does not have any warnings on JSFiddle. I have reviewed this page:(JSFiddle code not working in my own page), but this doesn't seem to be applicable to my question. Why does the code not run in other environments when it is functional on JSFiddle?
Here's the JSFiddle: The Code
Here is the exact JS I am using in my website:
$(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";
}
}
});
});
'
Are you importing JQuery? Commonly 'rare' errors coming from simple problems.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I recommend to you make your code more human readable taking advantage of JQuery you can replace all document.getElementById("ID_VALUE")
for $('#ID_VALUE')
PD: Good luck with that anti-cyberbulling. Important stuff.