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>
Related
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
I want to type in text in a text field, press a button, and the text of a paragraph will change. What would I need to do for this to happen and is there an easier way to do it other than javascript?
Since I didn't know what I needed to do, here's the code I originally had:
<html>
<head>
<title>Moving Text</title>
<link rel="stylesheet" type="text/css" href="stlye.css">
</head>
<body>
<div id="text">
<p id="new">new text</p>
Main News:<input type="text" name="update"><br>
<input type="button" value="Update" onClick="update();">
<script type="text/javascript">
function update(){
document.getElementById('new').innerHTML = 'Update';
}
</script>
</div>
</body>
I'm pretty sure it's wrong or way off. Any suggestions?
HTML:
<p id="your_paragraph">This text will change, after clicking the button.</p>
Main News: <input type="text" id="theText" />
<input type="button" id="btn" value="Update" />
JavaScript:
var p = document.getElementById('your_paragraph');
var btn = document.getElementById('btn');
var txt = document.getElementById('theText');
btn.onclick = function(){
p.textContent = txt.value;
};
http://jsfiddle.net/3uBKC/
No, you'll need to use javascript. Without an example of your markup nobody will be able to provide you a specific example, but here's a general one using the jQuery library.
// get the textarea, watch for change, paste, and keyup events
$('textarea').on('change paste keyup', function(){
// Store the text field as a variable, get it's value
var thiis = $(this),
value = thiis.val();
// replace the paragraph's content with the textrea's value
$('p').html(value);
});
When I use greater or less than symbol (< >) in code it returns a wrong result - for example when I enter 2 and 10, It returns 2 is bigger and 10 is smaller!
I know that I can use Math.max(a,b) then it returns the right result but I want to know: why does it return the wrong result? Am I wrong?
Please explain this for me. Thank you. (;
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>showing the bigger an smaller number</title>
<meta charset="utf-8">
<script>
function b(){
var a=document.getElementById("a").value;
var b=document.getElementById("b").value;
if (a>b){document.getElementById("o").innerHTML="a is bigger : "+a}
else {if (a<b){document.getElementById("o").innerHTML="b is bigger : "+b}}
}
function k(){
var a=document.getElementById("a").value;
var b=document.getElementById("b").value;
if (a>b){document.getElementById("o").innerHTML="b is smaller : "+b}
else {if (a<b){document.getElementById("o").innerHTML="a is smaller : "+a}}
}
</script>
<style>
small {
font-family:"Comic Sans MS", cursive;
color:#666;
}
input {
height:30px;
width:175px;
}
</style>
</head>
<body>
<input type="number" id="a" placeholder="type first Number here"></input><b> </b>
<input type="number" id="b" placeholder="type second number here"></input>
<br>
<button onClick="b();">show me the bigger Number</button>
<button onclick="k();">show me the smaller Number</button>
<br><b></b>
<br><small id="o"> </small>
</body>
</html>
Sorry if my English was bad.
Try parsing the values as floats. At the moment, you're comparing strings:
var a = parseFloat(document.getElementById("a").value),
b = parseFloat(document.getElementById("b").value);
Of course, this is going to cause problems if the user enters something other than a valid numerical value...
You can use the != (not equal) or !== (not identical) relational operators instead of <>.
<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.
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.