I am utterly new to JavaScript and am trying to self-learn a few things - so be gentle.
I am trying to set a variable using document.getElementById(' ').innerHTML but I can't get it to work - I just get "undefined" returned when I try to use this variable.
All of the examples I have seen says that this should work, but it isn't and I'm at my wits' end. Any help will be greatly appreciated.
This is the code...
<script>
var str = document.getElementById('str').innerHTML;
function calc()
{
if(document.getElementById('checkbox').checked)
document.getElementById('str').innerHTML = str ;
else
document.getElementById('str').innerHTML='unchecked';
}
</script>
Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>
My ultimate aim is to add a number to the variable "str" using another variable; so something like...
var str = document.getElementById('str').innerHTML;
var add = 2
function calc()
{
if(document.getElementById('checkbox').checked)
document.getElementById('str').innerHTML = str + add;
else
document.getElementById('str').innerHTML='unchecked';
}
I'm aware that I probably need to parse the str variable as an integer for this, but I've stumbled before I've even got that far.
Please help.
The value of str is determined when the page is loading (and before the element exists). I believe you want it inside calc:
function calc()
{
var span = document.getElementById('str');
var str = span.innerHTML;
var add = 2;
if(document.getElementById('checkbox').checked)
span.innerHTML = str + add;
else
span.innerHTML = 'unchecked';
}
The problem is that your span is below the script and actually str is not still there. Here is an example which works http://jsfiddle.net/krasimir/2C25E/
<script>
function calc() {
var str = document.getElementById('str').innerHTML;
var add = 2;
if(document.getElementById('checkbox').checked)
document.getElementById('str').innerHTML = parseInt(str) + add;
else
document.getElementById('str').innerHTML='unchecked';
}
</script>
Checkbox: <input type="checkbox" id="checkbox" name="checkbox" onclick="calc();"/>
<div>Str: <span id="str">6</span></div>
Also you should use parseInt to be sure that you get a Number and not a String.
if you had included the script in side the <head>tag This will work for you.
function calc() {
var str = document.getElementById('str').innerHTML;
//more code
Try this, a working version and a bit optimised:
var str = document.getElementById('str');
var chk = document.getElementById('checkbox');
var add = 2
function calc() {
chk.checked ? str.innerHTML = parseInt(str.innerHTML) + add : str.innerHTML = 6;
}
chk.onchange = function () {
calc();
};
Demo here
Related
I have asked something similar in the past but was able to resolve it by separating the functions by events. I need to be able to pass 2 href events in one Onchange Event because it is a dropdown, OR I need to be able to tie the second function into another Event.
This works only when an alert() is inserted. Once I take the alert() out it does not work. I've tried to supress the alert while still keeping it in the code and it works fine. I do not want the alert but I want the results.
HTML Here:
<select id="PartList" class="form-control form-control-lg ml-0" onChange="SelectMain();">
JavaScript Here
function sList() {
var pl = document.getElementById("PartList");
var value = pl.options[pl.selectedIndex].value;
var text = pl.options[pl.selectedIndex].text;
str = 'URL1 HERE='+ "'" + text + "'" ;
//alert(value);
//alert(text);
window.location.href = str;
}
function SelectValue() {
var pv = document.getElementById("PartList");
var value = pv.options[pv.selectedIndex].value;
str = 'URL2 HERE' + value ;
alert(value);
window.location.href = str;
}
function SelectMain() {
sList();
SelectValue();
}
function alert(message) {
console.info(message);
}
This is resolved, for those that come to this question. The problem wasn't with the JavaScript it was because the device I was sending the commands to couldn't handle the commands that fast. I have incorporated the resolved code with troubleshooting techniques.
function sList() {
var pl = document.getElementById("PartList");
var value = pl.options[pl.selectedIndex].value;
var text = pl.options[pl.selectedIndex].text;
str = 'URL1='+ "'" + text + "'" ;
//str1 = 'http://google.com';
//alert(value);
//alert(text);
window.location.href = str;
//window.open(str1);
}
function SelectValue() {
setTimeout(function(){
var pv = document.getElementById("PartList");
var value = pv.options[pv.selectedIndex].value;
str = 'URL2=' + value ;
//str1 = 'http://aol.com';
//alert(value);
window.location.href = str;
//window.open(str1);
},1000);
}
Hello I am trying to make my jquery code in working order but its not working at all, I don't know whats a problem behind it but it contains multiple text boxes in multiple rows, each row calculates its own sum
Here is Fiddle link
Here is my Code
$(document).ready(function(){
$('.employee input[type="text"]').keyup(function() {
var basic_salary = parseInt($('input[name^=txtMonthlyRate]').val());
var advance_salary = parseInt($('input[name^=txtAdvance]').val());
var recover_comm = parseInt($('input[name^=txtRecovery]').val());
var sales_comm = parseInt($('input[name^=txtSales]').val());
var deduction_salary = parseInt($('input[name^=txtDeduction]').val());
var adjustment_salary = parseInt($('input[name^=txtAdjustment]').val());
var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
$('input[name^=txtTotal]').val(total_sum);
console.log(total_sum)
);
});
The txtSales1, txtDeduction1, txtAdjustment1 variables are camel cased in your javascript, but not on the html input name. So these return NaN.
UPDATE Also, you need to set the context of what you're referring to using the second parameter of a selector function:
$('.employee input[type="text"]').keyup(function(e) {
var $scope = $(this).closest('.employee');
var basic_salary = parseInt($('input[name^=txtMonthlyRate]', $scope).val());
var advance_salary = parseInt($('input[name^=txtAdvance]', $scope).val());
var recover_comm = parseInt($('input[name^=txtRecovery]', $scope).val());
var sales_comm = parseInt($('input[name^=txtSales]', $scope).val());
var deduction_salary = parseInt($('input[name^=txtDeduction]', $scope).val());
var adjustment_salary = parseInt($('input[name^=txtAdjustment]', $scope).val());
var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
$('input[name^=txtTotal]', $scope).val(total_sum);
});
The txttotal1 needs to be changed to txtTotal1
The fiddle needs a closing }
In my project motools is used I haven't work with it ever. I have implemented my requirement in Jquery. Can anyone please convert it in motools if you know how to do it?
Here is code:
<input id="txtId" type="text" onkeyup="keywordWithcomma(event , this);"></input>
<div id="res" style="color:red;">Please Enter Keyword less than 15 charactres </div>
JQuery
function keywordWithcomma(event , obj){
$('#res').hide();
reg = /[^a-z,^A-Z^0-9,-, ]/g;
obj.value = obj.value.replace(reg,"");
var txt = $('#txtId').val().split(",");
var count = txt[txt.length-1];
if(count.length>15){
$('#res').show();
obj.value = obj.value.replace(count.substring(14),"");
}
}
Working JSFiddle Thanks in advance. :)
You just use jQuery for showing/hiding the elements and getting value of them. There is no need to use a DOM library for such short snippet, vanilla JavaScript is your friend:
function keywordWithcomma(event, obj) {
document.getElementById('res').style.display = 'none';
reg = /[^a-z,^A-Z^0-9,-, ]/g;
obj.value = obj.value.replace(reg, "");
var txt = document.getElementById('txtId').value.split(",");
var count = txt[txt.length - 1];
if (count.length > 15) {
document.getElementById('res').style.display = 'block';
obj.value = obj.value.replace(count.substring(14), "");
}
}
I was trying to figure out on how can I remove the string values. And also when I can remove them all? So here's the code.
HTML:
<div id="a"> </div>
<div id="x" onclick="EraseAll()"> </div>
JAVASCRIPT:
function ABC(){
document.getElementById('a').innerHTML += "<img src=\"buttonx.png\" id=\"Erase\" onclick=\"Erase()\"> </div>" + document.getElementById('n').value + document.getElementById('q').value + parseInt(document.getElementById('t').value);
}
Ive tried this code, but it won't work,
function Erase(){
var n = document.getElementById('n').value;
var q = document.getElementById('q').value;
var t = document.getElementById('t').value;
n = n.replace(n, " ");}
I'm still learning Javascript , so if any help would do, and also please only use Javascript, I've been asked to use Javascript only.
If I understand what you're looking for this should do it -
document.getElementById('n').value = '';
document.getElementById('q').value = '';
document.getElementById('t').value = '';
I know this has to be be doable, does anyone know how and if you can do it?
or you can do it this way:
var myVar = 'sup fresh our turn baby!';
var myTextArea = document.getElementById('myArea');
myTextArea.innerHTML += myVar;
Something like this should work:
var textArea = document.getElementById("mytextarea"); // assuming there is a textarea with id = mytextarea
var textToAppend = document.createTextNode("Hello, World!");
textArea.appendChild(textToAppend);
EDIT: or, as Pointy suggested, the last two lines can be replaced by:
textArea.value += "Hello, World!";
function appendText(str) {
var obj=document.getElementById("myTextArea")
var txt=document.createTextNode("append this text")
obj.appendChild(txt)
}
Gee whiz guys:
document.getElementById('whatever').value += someJavascriptString;