It just wont generate random numbers and input them in span id "broj1" and "broj2". This should work and i cant find any obvious error cause im still new to this. Thanks for help in advance :)
function potvrda(){
var odgovor = document.getElementById("odgovor").value;
var broj1 = parseInt(document.getElementById("broj1").innerHTML);
var broj2 = parseInt(document.getElementById("broj2").innerHTML);
var zbroj = broj1 + broj2;
if (odgovor == null || odgovor ==""){
alert("Molimo unesite zbroj");
return false;
}
else if(odgovor != zbroj){
alert("Molimo unesite ispravan Broj");
}
else{
document.getElementById("status").innerHTML = "processing";
docuemnt.getElemtntById("odgovor").innerHTML = "";
}}
function randomNums(){
var ran_num1 = Math.floor(Math.random() * 10) +1 ;
var ran_num2 = Math.floor(Math.random() * 10) +1 ;
document.getElementById("broj1").innerHTML = rand_num1;
document.getElementById("broj2").innerHTML = rand_num2;
}
</script>
<form method="post" onsubmit="return potvrda();">
Zbrojite:
<span id="broj1"></span> + <span id="broj2"></span>=</br>
<input type="text" id="odgovor" size="50" /> </br>
You are defining var ran_num1 and var ran_num2, but then you are trying to set the innerHTML of the elements to rand_num1 and rand_num2. You're missing a "d". This fiddle is working for me: http://jsfiddle.net/68NKQ/
Related
I'm trying to calculate the width of block, id="titleText" I am getting some luck, although it calculates incorrectly.
For example, when empty it still shows pixels (by default, it should be one), yet 18px remains in this example:
(using onkeydown)
(using onkeyup)
and...
Triggering my style logic before the number I specified, which is 585.
My HTML is:
<input type="text" autocomplete="off" id="serpTitle"
onkeydown="checkTitleValue()" class="form-control" />
<p class="d-block" id="titleText"></p>
and the Javascript
function checkTitleValue() {
var fontSize = 12;
var measureTitle = document.getElementById("titleText");
measureTitle.style.fontSize = fontSize;
var height = (measureTitle.clientHeight + 1) + "px";
var width = (measureTitle.clientWidth + 1) + "px"
var inputTitle = document.getElementById("serpTitle").value;
document.getElementById("titleText").innerText = inputTitle;
document.getElementById("titlePixels").innerText = width;
if (measureTitle.clientWidth + 1 > 585) {
document.getElementById("titlePixels").style.color = "red";
}
else if (measureTitle.clientWidth + 1 < 585)
{
document.getElementById("titlePixels").style.color = null;
}
}
Could you please try this code snippet. I don't get the point of this measureTitle.clientWidth + 1 or measureTitle.clientWidth + 1 < 585
const FONT_SIZE = 12;
const MAX_LENGTH = 585;
var serpTitle = document.getElementById('serpTitle');
var mesured = document.getElementById('measured');
var maxLength = document.getElementById('max-length');
var measureCont = document.getElementById('mesure-cont');
function init() {
measureCont.style.fontSize = FONT_SIZE;
maxLength.innerHTML = MAX_LENGTH + 'px';
updateMesure();
}
function updateMesure() {
measureCont.innerHTML = serpTitle.value;
mesured.innerHTML = measureCont.clientWidth;
}
function checkTitleValue() {
updateMesure();
if (measureCont.clientWidth > MAX_LENGTH) {
measured.style.color = 'red';
} else {
measured.style.color = null;
}
}
init();
<div>
<input type="text" autocomplete="off" id="serpTitle" onkeyup="checkTitleValue()"
class="form-control" />
<span id="measured"></span>/<span id="max-length"></span>
</div>
<div>
<span style="display: inline-block" id="mesure-cont">aaaaa</span>
</div>
You should probably try calling the function on keyup instead of keydown.
Since each keystroke is ACTUALLY executed in the input box at keyup: Meaning.. (after) the key has been "pressed".
So your HTML code probably should go like:
<input type="text" autocomplete="off" id="serpTitle"
onkeyup="checkTitleValue()" class="form-control" />
<p class="d-block" id="titleText"></p>
one of the issue, regarding changing color, is that you first updating color then calculating it. So swap
if (measureTitle.clientWidth > 585) {
document.getElementById("titlePixels").style.color = "red";
}
else if (measureTitle.clientWidth < 585)
{
document.getElementById("titlePixels").style.color = null;
}
document.getElementById("titleText").innerText = inputTitle;
document.getElementById("titlePixels").innerText = width;
I just want to get the square root of total2 .. but it won't appear in the selected box ..
here is the javascript codes.
i'll comment the html codes.
function myFunction() {
var q1 = document.getElementById("qinput1").value;
var q2 = document.getElementById("qinput2").value;
var q3 = document.getElementById("qinput3").value;
var total = parseInt(q1) + parseInt(q2) + parseInt(q3);
document.getElementById("ainput3").value=total;
var a1 = document.getElementById("ainput1").value;
var a2 = document.getElementById("ainput2").value;
//from the total we got, lets assign it a variable for further calculation
var a3 = document.getElementById("ainput3").value=total;
var total2 = parseInt(a1)*parseInt(a2)/ parseInt(a3);
document.getElementById("ansA").value = total2;
var total3 = math.sqrt(parseInt(total2));
document.getElementById("sqaureD").value = total3;
}
function myShapes() {
document.getElementById('squareA').style.display =
document.getElementById('shapes').value == 'Square' ? 'block' : 'none'
}
<form action="" id="fcalculation">
<fieldset>
<legend>Calculation of qu</legend>
<label><i>Ultimate bearing capacity</i> <b>(qu) = </b></label>
<input id="qinput1" type="text" placeholder="c'NcFcsFcdFci"/> +
<input id="qinput2" type="text" placeholder="qNqFqsFqdFqi"/> +
<input id="qinput3" type="text" placeholder="½βγNFγsFγdFγi"/>
</fieldset>
</form>
it seems that the calculation part at the very end is not working. sorry its my first time to code.
Classname is Math not math
Try replacing
var total3 = math.sqrt(parseInt(total2,10));
with
var total3 = Math.sqrt(parseInt(total2,10));
Also, looking at your markup, there are no fields with id ainput1, ainput2 and ainput3.
here's my code, brand new to coding trying to get the box "points" to return the sum of pointSum if "Ben" is typed into the box "winner". Just trying to work on some basics with this project. Attempting to make a bracket of sorts
<HTLML>
<head>
<script>
var pointSum = 0;
var firstRound = 20;
var secondRound = 50;
var thirdRound = 100;
var fourthRound = 150;
var fifthRound = 250;
var finalRound = 300;
var winnerOne = false;
var winnerTwo = false;
var winnerThree = false;
var winnerFour = false;
var winnerFive = false;
var winnerSix = false;
if (winnerOne = true){
pointSum+=firstRound
} else if (winnerTwo = true){
pointSum+=secondRound
} else if (winnerThree = true){
pointSum+=thirdRound
} else if (winnerFour = true){
pointSum+=fourthRound
} else if (winnerFive = true){
pointSum+=fifthRound
} else if (winnerSix = true){
pointSum+=finalRound
else
function tally() {if document.getElementById('winner') == "Ben" { winnerOne = true;
}
pointSum=document.getElementById("points").value;
}
</script>
</head>
<body>
<form>
Winner:
<input type="text" name="winner" id="winner" size="20">
Points:
<input type="text" name="points" id="points" size="20">
Submit
<button type= "button" onclick="tally()">Tally points</button>
</form>
</body>
</html>
UPDATE***** new code, getting better, not returning console errors but still not getting anything in the "points" box upon clicking tally
<HTLML>
<head>
<script>
var pointSum = 0;
var firstRound = 20;
var secondRound = 50;
var thirdRound = 100;
var fourthRound = 150;
var fifthRound = 250;
var finalRound = 300;
var winnerOne = false;
var winnerTwo = false;
var winnerThree = false;
var winnerFour = false;
var winnerFive = false;
var winnerSix = false;
function tally() {
var winner = document.getElementById("winner").value;
var firstWinner = "Ben";
if (winner == firstWinner){
winnerOne == true;
}
pointSum = document.getElementById("points").value;
}
if (winnerOne == true){
pointSum+=firstRound;
} else if (winnerTwo){
pointSum+=secondRound;
} else if (winnerThree){
pointSum+=thirdRound;
} else if (winnerFour){
pointSum+=fourthRound;
} else if (winnerFive){
pointSum+=fifthRound;
} else if (winnerSix){
pointSum+=finalRound;
}
</script>
</head>
<body>
<form>
Winner:
<input type="text" name="winner" id="winner" size="20">
Points:
<input type="text" name="points" id="points" size="20">
Submit
<button type= "button" onclick="tally()">Tally points</button>
</form>
<div class="updatePoints">
</div>
</body>
</html>
Your code has a few mistakes, lets change it a little bit!
First, you need to access 'value' atribbute of your winner element in your if statement, and surround all the statement in parenthesis
function tally() {
if (document.getElementById('winner').value == "Ben"){
winnerOne = true;
}
pointSum = document.getElementById("points").value;
}
Second, you use '==' to make comparison, you are using '=', it means that you are assign true to variables, and you're forgetting to put ';' at the end of lines! change this part:
if (winnerOne == true){
pointSum+=firstRound;
}
put all of your if/else like the example above!
Hint: when you are using if statement you can use like this:
if (winnerOne){ //you can omit == true, because if winnerOne is true, it will enter ind the if statement
//will enter here if winnerOne is true
}
if (!winnerOne){ //you can omit == false, because if winnerOne is not true, it will enter ind the if statement
//will enter here if winnerOne is false
}
You also have a left over else at the end of your if check which is invalid. You need to end the last else if statement with the };.
Are you trying to out put the text somewhere? I don't see any code that is handling this - you may want to add some HTML that will update like so:
<div class="updatePoints">
// leave empty
</div>
Then within your JavaScript you can always add some code to update the .updatePoints
var points = document.getElementByClass('updatePoints');
points.innerHTML = pointSum.value;
Have add some lines in your code and modify it with some comments. Can try at https://jsfiddle.net/8fhwg6ou/. Hope can help.
<HTLML>
<head>
<script>
var pointSum = 0;
var firstRound = 20;
var secondRound = 50;
var thirdRound = 100;
var fourthRound = 150;
var fifthRound = 250;
var finalRound = 300;
var winnerOne = false;
var winnerTwo = false;
var winnerThree = false;
var winnerFour = false;
var winnerFive = false;
var winnerSix = false;
function tally() {
var winner = document.getElementById("winner").value;
var firstWinner = "Ben";
if (winner == firstWinner){
winnerOne = true; // Use only one = symbol to assign value, not ==
pointSum = Number(document.getElementById("points").value); // moved from outside and convert to number
// This code will update point in Points box
document.getElementById("points").value = tally_pointsum(pointSum);
// The codes below will add the text in div, just remove the + sign if you don't like
document.getElementById("updatePoints").innerHTML += (tally_pointsum(pointSum) - pointSum) + " points added<br />";
}
}
// Wrap codes below become a function, lets call it tally_pointsum:
function tally_pointsum(pointSum) {
if (winnerOne == true){
pointSum+=firstRound;
} else if (winnerTwo){
pointSum+=secondRound;
} else if (winnerThree){
pointSum+=thirdRound;
} else if (winnerFour){
pointSum+=fourthRound;
} else if (winnerFive){
pointSum+=fifthRound;
} else if (winnerSix){
pointSum+=finalRound;
}
return pointSum; //return the sum to caller
}
</script>
</head>
<body>
<form>
Winner:
<input type="text" name="winner" id="winner" size="20">
Points:
<input type="text" name="points" id="points" size="20">
Submit
<button type= "button" onclick="tally()">Tally points</button>
</form>
<!-- change class="updatePoints" to id="updatePoints" for document.getElementById("updatePoints") -->
<div id="updatePoints">
</div>
Happy coding.
I'm new here, and very new to Javascript and programming concepts in general. Part of the form I'm working on simlpy needs to calculate the difference between two prices. I do know float numbers are screwy, so I have that part figured out. And it calculates, and inputs it into field 3. The only thing I can't seem to figure out is making it so that if either field 1 or 2 is empty, the function doesn't run. It should only run when both fields are filled. Here's my example code:
<input type="text" id="1"> </input><br/>
<input type="text" id="2"> </input><br/>
<input type="text" id="3"> </input><br/>
<br/><br/><br/>
<p id="test"></p>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function emptyCheck(){
if ($("#1") = ""){
$("#3").val("");
}
else if ($("#2") = ""){
$("#3").val("");
}
else{
rateDiff();
}
}
function rateDiff(){
var clientRate = $("#1").val() * 100;
var agentRate = $("#2").val() * 100;
var fareDiff = clientRate - agentRate;
var fareDiffDec = fareDiff / 100;
$("#3").val(fareDiffDec.toFixed(2));
}
$("#1").keyup(emptyCheck);
$("#2").keyup(emptyCheck);
</script>
I don't get what I'm doing wrong here. Can anyone point me in the right direction?
if ($("#1") = ""){
should be
if ($("#1").val() == ""){
same for $("#2") = ""
$("#1") is a jquery element, not the value.
Also you put = instead of ==
$("#1") = "")
Should be
$("#1").val() == "")
One = is used to assign a value, while two == is to do a comparison.
Just use the "falsey" of JavaScript and the values:
function emptyCheck(){
if (!$("#1").val() || !$("#2").val()){
$("#3").val("");
}
else{
rateDiff();
}
}
NOTE: you would be better parsing the numbers to handle alpha entry:
function emptyCheck() {
if (!parseFloat($("#1").val()) || !parseFloat($("#2").val())) {
$("#3").val("");
} else {
rateDiff();
}
}
function rateDiff() {
var clientRate = parseFloat($("#1").val()) * 100;
var agentRate = parseFloat($("#2").val()) * 100;
var fareDiff = clientRate - agentRate;
var fareDiffDec = fareDiff / 100;
$("#3").val(fareDiffDec.toFixed(2));
}
$("#1").keyup(emptyCheck);
$("#2").keyup(emptyCheck);
I am trying to setup a small article chooser. While it works in Firefox and Chrome, as well as IE7, it has problems on IE8 and IE9.
In IE 8 and 9 it changes to "increase" field to "NaN" when clicked. (edit: solved by placing a letter in front of the number)
In IE9 it updates the "Warenkorb", but places "NaN" or "\/" in
the field for "Anzahl". (edit: solved by placing a letter in front of the number)
In IE8 it completely ignores the update function. (edit: is related to the innerHTML-Bug)
To me it seems that somehow I can not reach the form itself. I have already tried to use document.forms[0] and document.getElementById["bestmult"] instead, in case the delivered object is not the field inside the form, but that did not change anything.
I feel like the solution is very simple, but I just can not put my finger on it.
Here is the code:
<script>
var sumarray = new Array();
var artarray = new Array();
var costarray = new Array();
var counter=0;
function increase(obj, field, type){
var form = obj.form;
var value = parseInt(form.elements[field].value, 10);
value++;
form.elements[field].value = value;
updateCosts(obj, field, type);
}
function decrease(obj, field, type){
var form = obj.form;
var value = parseInt(form.elements[field].value, 10);
if(value > 0){
value--;
form.elements[field].value = value;
updateCosts(obj, field, type);
}
}
function updateCosts(obj, field, type){
var form = obj.form;
var exist = artarray.indexOf(form.elements[field].name);
var preis = 0;
if (type == 'b'){
preis = 19.95;
}else if (type == 'p') {
preis = 29.95;
}
if (exist != -1){
if (form.elements[field].value == 0){
sumarray.splice(exist , 1);
artarray.splice(exist , 1);
costarray.splice(exist , 1);
counter--;
}else {
sumarray[exist] = form.elements[field].value;
artarray[exist] = form.elements[field].name;
costarray[exist] = preis;
}
}else {
sumarray[counter] = form.elements[field].value;
artarray[counter] = form.elements[field].name;
costarray[counter] = preis;
counter++;
}
var completestring = "";
if (counter > 0) {
var product = 0;
completestring += "<h1>Warenkorb</h1><table border=0><tr style='background:gray;' align='center'><td width=110 align='center'>Artikel</td><td width=80>Anzahl</td><td align='center' width=60>Preis</td><td align='center' width='40'>Del</td></tr>";
for(var i=0;i<counter;i++){
completestring += "<tr><td>"+artarray[i].replace("_", " ")+"</td><td align=center>"+sumarray[i]+"</td><td align=center>"+costarray[i]+"</td><td align=center><img src='img/trash.png' onclick='setZero(\""+artarray[i]+"\")'></td></tr>";
product += parseInt(sumarray[i])*parseInt(costarray[i]);
}
completestring += "</table><h2>"+(product).toFixed(2)+"</h2>";
} else {
completestring += "<h1>Warenkorb</h1>";
}
document.getElementById("sum").innerHTML = completestring;
}
function setZero(element) {
var form = document.forms[0];
form.elements[element].value = "0";
var obj = form.elements[element];
updateCosts(obj, element, "b");
}
</script>
<div id="sum">
</div>
<form id="bestmult" action="test2.html" method="post">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td rowspan="2"><input type="text" name="1_Basis" value="0" onblur="updateCosts(this, '1_Basis', 'b')" /></td>
<td><input type="button" value=" /\ " onclick="increase(this, '1_Basis', 'b')" class="button" ></td>
</tr><tr>
<td><input type="button" value=" \/ " onclick="decrease(this, '1_Basis', 'b')" class="button" ></td>
</tr>
</table>
This code is of cause not everything there is (although everything that could potentially influence the problem at hand), so don't bother with the script tags, or the incomplete form, these where just added for completion, to show how it all fits together without having to post the whole code.
edit: it seems that IE8 and 9 have a problem with the way I named by textfields. I could resolve most of the problem by simply putting a z at the start which I can later simply strip to regain to proper text. Now it is just IE8 that does not seem to like innerHTML. I did find a lot on this on the Internet, yet nothing that really works.
Check my modifications in your script code
<script>
var sumarray = new Array();
var artarray = new String();
var costarray = new Array();
var counter=0;
function increase(obj, field, type){
var form1 = obj.form;
//alert(obj.form1.elements[0].value);
var value = parseInt(form1.elements(field).value, 10);
value++;
form1.elements(field).value = value;
updateCosts(obj, field, type);
}
function decrease(obj, field, type){
var form = obj.form;
var value = parseInt(form.elements(field).value, 10);
if(value > 0){
value--;
form.elements(field).value = value;
updateCosts(obj, field, type);
}
}
function updateCosts(obj, field, type){
var form = obj.form;
var exist = artarray.indexOf(form.elements(field).name);
var preis = 0;
if (type == 'b'){
preis = 19.95;
}else if (type == 'p') {
preis = 29.95;
}
if (exist != -1){
if (form.elements(field).value == 0){
sumarray.splice(exist , 1);
artarray.splice(exist , 1);
costarray.splice(exist , 1);
counter--;
}else {
sumarray[exist] = form.elements(field).value;
artarray[exist] = form.elements(field).name;
costarray[exist] = preis;
}
}else {
sumarray[counter] = form.elements(field).value;
artarray[counter] = form.elements(field).name;
costarray[counter] = preis;
counter++;
}
var completestring = "";
if (counter > 0) {
var product = 0;
completestring += "<h1>Warenkorb</h1><table border=0><tr style='background:gray;' align='center'><td width=110 align='center'>Artikel</td><td width=80>Anzahl</td><td align='center' width=60>Preis</td><td align='center' width='40'>Del</td></tr>";
for(var i=0;i<counter;i++){
completestring += "<tr><td>"+artarray[i].replace("_", " ")+"</td><td align=center>"+sumarray[i]+"</td><td align=center>"+costarray[i]+"</td><td align=center><img src='img/trash.png' onclick='setZero(\""+artarray[i]+"\")'></td></tr>";
product += parseInt(sumarray[i])*parseInt(costarray[i]);
}
completestring += "</table><h2>"+(product).toFixed(2)+"</h2>";
} else {
completestring += "<h1>Warenkorb</h1>";
}
document.getElementById("sum").innerHTML = completestring;
}
function setZero(element) {
var form = document.forms[0];
form.elements[element].value = "0";
var obj = form.elements[element];
updateCosts(obj, element, "b");
}
</script>
For ie8 indexOf() method for Array will give error. Check this
I think the problem is related to passing "this" to the function. It seems to be passing the button.
Try replacing
var form = obj.form;
with
var form=document.forms[0]
and ignore the reference to "obj"
Ok, so here is the solution packed together into one answer:
I was facing two problems:
the first one was, that an attribute name in XML can not start with a Number. I solved this by simply adding a letter in front, which i could delete for the String lateron using the replace-function.
The second problem was that the IE8 does not have the Array function indexOf(). Thank you 555k for your help here, you gave me the final piece to the puzzle. I wrote a small workaround, that suits my situation:
var exist = -1;
var needle = form.elements[field].name;
for (var i=0;i<counter;i++){
if (artarray[i].indexOf(needle) != -1){
exist = i;
}
}
This does exactly what I want, so it works for my problem. It is, of cause, not a solution to the problem of a nonexistant "indexOf()" for an aged browser, but maybe someone can use this.