Block all inappropriate words in the textbox when click button - javascript

Below is my code which show me notice of inserting kill , fight, slap when i insert in the textbox.
But i want to block all inappropriate words possible in the textbox like f**k and so on. DO you guys have any ideas. Thanks
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="wrapper" style="width:600px; margin:0 auto;">
<h2></h2>
<input id="txtWords" style="width:300px;" />
<br />
<input type="button" id="btnCheck" onclick="fnCheckForRestrictedWords();" value="Check For
Restricted Words">
</div>
<script type="text/javascript">
function fnCheckForRestrictedWords() {
var restrictedWords = new Array("kill", "fight", "slap");
var txtInput = document.getElementById("txtWords").value;
var error = 0;
for (var i = 0; i < restrictedWords.length; i++) {
var val = restrictedWords[i];
if ((txtInput.toLowerCase()).indexOf(val.toString()) > -1) {
error = error + 1;
}
}
if (error > 0) {
alert('You have entered some restricted words.')
}
else {
// Your logic here
}
}
</script>
</body>
</html>

You need to define all "bad" words and put them in your blacklist. You can use some existing lists as a starting point for your list:
https://github.com/LDNOOBW/List-of-Dirty-Naughty-Obscene-and-Otherwise-Bad-Words/blob/master/en
https://github.com/dariusk/wordfilter/blob/master/lib/badwords.json
http://www.bannedwordlist.com/lists/swearWords.txt
http://www.frontgatemedia.com/new/wp-content/uploads/2014/03/Terms-to-Block.csv
Source: Reddit
If you want to include obfuscated "bad" words you may need to add the to the list as well.

The
includes()
method should work: txtInput.includes(restrictedWords[i]) which returns either true or false. You also want to include more bad words and different ways to write them

Related

All buttons have same width - jQuery

Im programming a calculator and Im trying that all the buttons in the same column has the same width. For that Im using jQuery (Im doing it this way cause I have an exam in some days and I wanna practice).
My HTML code:
<html>
<head>
<meta charset="UTF-8">
<title>CORE2017 P3</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="calculadora.js"></script>
<link href="calculadora.css" rel="stylesheet" type="text/css" media="all">
</head>
<body onload="igualarBotones()">
<header>
<p>Calculator</p>
</header>
<section id="main">
<p>
Número: <input type="text" id="pantalla"> <button id="Limpiar">Limpiar</button>
</p>
<p>
<button id="suma" class="columna1">+</button>
<button id="resta" class="columna2">-</button>
<button id="cuadrado" class="columna3">x<sup>2</sup></button>
</p>
<p>
<button id="inverso" class="columna1">1/x</button>
<button id="raiz" class="columna2">sqrt(x)</button>
<button id="pentera" class="columna3">parte_entera(x)</button>
</p>
<p>
<button id="potencia2" class="columna1">2<sup>x</sup></button>
<button id="factorial" class="columna2">x!</button>
<button id="igual" class="columna3">=</button>
</p>
</section>
</body>
</html>
My JavaScript code:
$(function() {
function igualarBotones(){
var columna1 = $(".columna1");
setMax(columna1);
var columna2 = $(".columna2");
setMax(columna2);
var columna3 = $(".columna3");
setMax(columna3);
}
function setMax(columna){
var maxColumna = -1;
for(i=0; i<columna.length; i++){
if(columna[i].css("width") > maxColumna){
maxColumna = columna[i].css("width");
}
}
for(i=0; i<columna.length; i++){
columna[i].css("width",maxColumna);
}
}
});
Anyone knows why it isnt working?
EDIT: I used $(columna[i]).css instead of columna[i].css and it worked. However I dont achieve that my function igualarBotones() gets defined when loading the body, I think it must be something related to how I named or wrote the function. If I write the Javascript this way:
$(function() {
var columna1 = $(".columna1");
setMax(columna1);
var columna2 = $(".columna2");
setMax(columna2);
var columna3 = $(".columna3");
setMax(columna3);
function setMax(columna){
var maxColumna = -1;
for(i=0; i<columna.length; i++){
if(parseFloat($(columna[i]).css("width")) > parseFloat(maxColumna)){
maxColumna = $(columna[i]).css("width");
}
}
columna.css("width",maxColumna);
}
});
it works, but I want to do it with a function igualarBotones() that gets loaded with the body. Any idea what am I doing wrong?
Thank you all, Luis.
The issue is understanding the different between jquery representation of elements and "raw" elements in javascript.
Given var columna1 = $(".columna1"); what this means is that it will return a jquery object that is a collection of all elements that the selector (.column1 in this case) has specified.
When you iterate through this jquery collection (columna[i]) you don't get a jquery representation of the elements but actually the raw elements themselves (or a native javascript representation of the elements). Native javascript elements do not have a .css function.
So when you wrap each element around $(...) by doing this $(columna[i])you are then once again dealing with a jquery representation of each element and as such you are able to use .css. That is why the former does not work and the later works.
EXTRA SUGGESTION
Since you are learning jquery let me add this: Jquery has a .each function that you should actually use to loop over a jquery object that contains elements.
So this function:
function setMax(columna){
var maxColumna = -1;
for(i=0; i<columna.length; i++){
if(parseFloat($(columna[i]).css("width")) > parseFloat(maxColumna)){
maxColumna = $(columna[i]).css("width");
}
}
columna.css("width",maxColumna);
}
Could/Should be:
function setMax(columna){
var maxColumna = -1;
columna.each(function(){
// note the use of "this" to represent each
// element currently being iterated over.
// this = raw element, $(this) = jquery object representing element.
if(parseFloat($(this).css("width")) > parseFloat(maxColumna)){
maxColumna = $(this).css("width");
}
});
columna.css("width",maxColumna);
}
LAST TIP
I personally assist/help myself remember jquery object in my javascript code by prepending $ to all variables that are jquery objects so as to not forget them.
So this:
var columna1 = $(".columna1");
Would be:
var $columna1 = $(".columna1");
I'm not familiar with a .css function in vanilla javascript. I changed that so it would call the jQuery .css function. Also, at least in the pen, the function wasn't defined when the body was loading. Something is still off in how you're finding the max size, but this should get you started.
function igualarBotones(){
var columna1 = $(".columna1");
setMax(columna1);
var columna2 = $(".columna2");
setMax(columna2);
var columna3 = $(".columna3");
setMax(columna3);
}
function setMax(columna){
var maxColumna = -1;
for(var i=0; i<columna.length; i++){
if($(columna[i]).css("width") > maxColumna){
maxColumna = $(columna[i]).css("width");
}
}
for(i=0; i<columna.length; i++){
$(columna[i]).css("width",maxColumna);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>CORE2017 P3</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="calculadora.js"></script>
<link href="calculadora.css" rel="stylesheet" type="text/css" media="all">
</head>
<body onload="igualarBotones();">
<header>
<p>Calculator</p>
</header>
<section id="main">
<p>
Número: <input type="text" id="pantalla"> <button id="Limpiar">Limpiar</button>
</p>
<p>
<button id="suma" class="columna1">+</button>
<button id="resta" class="columna2">-</button>
<button id="cuadrado" class="columna3">x<sup>2</sup></button>
</p>
<p>
<button id="inverso" class="columna1">1/x</button>
<button id="raiz" class="columna2">sqrt(x)</button>
<button id="pentera" class="columna3">parte_entera(x)</button>
</p>
<p>
<button id="potencia2" class="columna1">2<sup>x</sup></button>
<button id="factorial" class="columna2">x!</button>
<button id="igual" class="columna3">=</button>
</p>
</section>
</body>
</html>

Javascript slideshow - Add next/forward and previous/rewind

I have this javascript slideshow which is working fine with the pause/play option:
<html>
<head>
<title>Simple Javascript Slideshow</title>
<script type="text/javascript">
var i = 0, imgsrc = new Array(), preload = new Array();
imgsrc[0]="photos/image1.png";
imgsrc[1]="photos/image2.png";
imgsrc[2]="photos/image3.png";
for (var j=0;j<imgsrc.length;j++)
{
preload[j] = new Image;
preload[j].src = imgsrc[j];
}
function mode(param)
{
smode=param;
}
function startSlideshow()
{
if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("slideshow").src=imgsrc[i];
i++;
setTimeout("startSlideshow()",1000);
}
else if(smode=="pause")
{
document.getElementById("pause").disabled="disabled";
document.getElementById("play").disabled="";
document.getElementById("play").value="Resume";
}
else if(smode=="stop")
{
document.getElementById("play").disabled="";
document.getElementById("play").value="Play";
document.getElementById("pause").disabled="disabled";
document.getElementById("stop").disabled="disabled";
document.getElementById("slideshow").src=imgsrc[0];
i=0;
}
if(i==imgsrc.length)
{
i=0;
}
}
</script>
</head>
<body>
<img id="slideshow" src="photos/Aanimation-ir001.png" />
<br />
<input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" />
<input id="pause" type="button" value="Pause" disabled="disabled"
onclick="mode('pause');startSlideshow();" />
<input id="stop" type="button" value="Stop" disabled="disabled"
onclick="mode('stop');startSlideshow();" />
</body>
</html>
It would be great to have a rewind/forward (next/previous image) option to use with the pause-option.
Is that possible?
Kind Regards
You should be able to figure it out with your current code.
Here are some hints :
The image currently displayed is defined by this :
document.getElementById("slideshow").src=imgsrc[i];
If the currently displayed image has index i, what index does the next one have ? What about the previous one ?
Once you have solved this, you must bind your new function (or new case of your existing function) to your HTML markup, like you have done here :
<input id="next" type="button" value="Next" onclick="mode('next');" />
As a side note, you should pay attention to what happens if you're displaying the last (or first) image and press next (or previous).
Hope that helps.
Think I got it now:
This is what I got for the forward-option:
if(smode=="next")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i++];
}
And with the backward:
if(smode=="pre")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i--];
}
And to avoid going from 0 to -1, -2 and so on I got this:
if(i==-1)
{
i= 23;
}
BUT: When I press backwards it goes forward on the first click and then go backward on the second click?
Regards

HTML button adds numbers in textfield in Javascript

What I am trying is the following :
I have 2 buttons and one textfield (code you see below)
On the buttons there is a value on it : 0,20 and 0,05.
When you press one of the buttons the value should be displayed in the textfield and when you press one of those buttons again the value should be added to the current value.
Here is the code I have at the moment :
<input id="bedraggroot" type="button" value="0.20" onClick="b();">
<input id="bedragklein" type="button" value= "0.05" onClick="b();">
<p> Ingeworpen : <span id="toonbedrag"> Ingeworpen </span></p>
function b()
{
var bedrag1 = parseFloat(document.getElementById('bedraggroot').value);
var bedrag2 = parseFloat(document.getElementById('bedragklein').value);
var totaalbedrag;
if(bedrag1 == 0)
{
parseFloat(totaalbedrag)+ bedrag2;
}
if(bedrag2 == 0)
{
parseFloat(totaalbedrag) = totaalbedrag + bedrag1;
tussenbedrag = tussenb
}
document.getElementById('toonbedrag').innerHTML = totaalbedrag;
}
I already tried al bunch of stuff but nothing seem to work what I try.
without the parseFloat, with a + before it. (Read all those things in these forums)
Can someone help me out?
As you might know, I am just a beginner in these things.
Kind regards.
Instead of doing the if conditions, you should pass the button values to the function "b" (you should use more definitive names for the functions).
You are also doing the calculation wrong. "a + b" doesn't really store the result of the calculation, but "a = a + b;" does.
<input id="bedraggroot" type="button" value="0.20" onClick="b(this.value);">
<input id="bedragklein" type="button" value= "0.05" onClick="b(this.value);">
<p> Ingeworpen : <span id="toonbedrag"> Ingeworpen </span></p>
<script>
var totaalbedrag = 0;
function b(bedrag)
{
totaalbedrag = parseFloat(bedrag) + totaalbedrag;
document.getElementById('toonbedrag').innerHTML = totaalbedrag.toFixed(2);
}
</script>
"toFixed" removes the issue with float decimal rounding, described here: Javascript, weird floating point number endless decimal?
Try it out in here in jsfiddle
lots of issues here. You're not assigning parseFloat(totaalbedrag)+ bedrag2; and you're assigning something to the expression parseFloat(totaalbedrag) which should definitely fail and display something in the console.
Finally, you're assigning tussenb to tussenbedrag but neither was defined.
If the code you show above is complete - you're missing the script tag to mark it as code. See http://www.w3schools.com/html/html_scripts.asp
Please try below
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery 3D Falling Leaves Demo</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
<input id="bedraggroot" type="button" value="0.20" onClick="b(this.value);">
<input id="bedragklein" type="button" value= "0.05" onClick="b(this.value);">
<p> Ingeworpen :
<input type="text" id="toonbedrag" value="0.0" />
</p>
<script>
function b(value)
{
var prevTotal = $('#toonbedrag').val();
var total=parseFloat(prevTotal) + parseFloat(value);
$('#toonbedrag').val(total.toFixed(2));
}
</script>
</body>
</html>

The description of the selected option in dropdown works on all the browsers except Firefox; how to fix it?

<html
<head>
<title>Dropdown tooltip</title>
</head>
<body style="font-size:10pt;font-family:Verdana;">
<script language="javascript">
function showTip(oSel) {
var theTip = document.getElementById("spnTip");
theTip.style.top = window.event.clientY + 20;
theTip.style.left = window.event.clientX;
theTip.innerText = oSel.options[oSel.selectedIndex].text;
theTip.style.visibility = "visible";
}
function hideTip() {
document.getElementById("spnTip").style.visibility = "hidden";
}
</script>
<form>
<select style="width:100px;" onchange="showTip(this)">
<option>Have you seen the latest M. Night Shyamalan film?</option>
<option>It's called The Village.</option>
<option>Although the critics didn't like it, I think it was extremely well done.</option>
<option>You will be kept in suspense even if you think you have figured out the ending.</option>
</select>
<span id="spnTip"
style="position:absolute;visibility:hidden;background:lightyellow;
border:1px solid gray;padding:2px;font-size:8pt;font-family:Verdana;"
onMouseOut="hideTip()"></span>
<br /><br /><br />
</form>
</body>
</html>
The CSS left and top properties take lengths, not numbers. You are missing units.

Not knowing how to position the output of Javascript in an HTML page

I am a javascript beginner . I am working on a wordsmith game that display's a clue (on the roll of a dice ) to a word . now i need to display the blank spaces of the word and a clue below it . I am not knowing hot to display the content to the place i want in the page ???
<html>
<head>
<script type="text/javascript">
form1= document.forms[0];
function display()
{
words=new Array("Elephant","Tiger","Panther","Giraffe","Zebra","Anaconda");
phrases=new Array("Largest Land Mammal","Striped Animal moving towards Extinction","Found in the Amazon Jungle","Found in Africa","It helps us Cross","Very Dangerous Reptile");
count = words[i].length;
while(count>0)
{
document.write("__")//to display the word with blank spaces
document.write(""); // space in between characters
count--;
}
}
function show_dice()
{
randomnumber=Math.floor(Math.random()*6);
i=randomnumber;
randomnumber = randomnumber + 1;
document.getElementById("myButton1").value=randomnumber;
document.getElementById("myButton1").disabled="disabled";
}
</script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
</head>
<body>
<form>
<input type="button" id = "myButton1" name ="Button1" onclick="show_dice()" value="Click the Dice!!!">
<h1>Enter Your Guess For the Word Below</h1>
<h2> Clue to the Word is :</h2>
<input type="text" value="" class="keyboardInput">
</form>
</body>
</html>
Just for start, you could to create a <input type=text id=clue /> and to edit it's content by running
document.getElementById("clue").value= "___";
Later, you can to create a <div> and alter it's content through .innerHTML property;
Instead of answering your question I'll recommend reading W3C DOM -Introduction on quirksmode.org. It explains the "why" of Rubens' answer and gives you knowledge to solve similar problems in the future.

Categories