As a beginner for javascript, I'm having some difficulties to build functions so that multiple functions use the same element on a page. The purpose of the function is to calculate and display a value based on the input of a user.
The function looks like this:
<script language='javascript' type='text/javascript'>
document.getElementById("n182849949").onblur = function () {
reSumText1();
};
document.getElementById("n182849950").onblur = function () {
reSumText1();
};
document.getElementById("n182849951").onblur = function () {
reSumText1();
};
document.getElementById("n182849952").onblur = function () {
reSumText1();
};
function Tonumber(numX) {
return Number(numX.replace(".", "").replace(" ", "").replace(",", "."));
}
function reSumText1() {
var num1 = Tonumber(document.getElementById("n182849949").value);
var num2 = Tonumber(document.getElementById("n182849950").value);
var num3 = Tonumber(document.getElementById("n182849951").value);
var num4 = Tonumber(document.getElementById("n182849952").value);
var sum2 = num1 + num2 + num3 + num4;
var sum3 = sum2.toLocaleString("de-DE");
document.getElementById("1").innerHTML = sum3;
}
</script>
The function works as intended, but as soon as there is another function using one of the elements, only one is working:
<script language='javascript' type='text/javascript'>
document.getElementById("n182853134").onblur = function () {
reSumText2();
};
document.getElementById("n182853151").onblur = function () {
reSumText2();
};
document.getElementById("n182853118").onblur = function () {
reSumText2();
};
document.getElementById("n182849952").onblur = function () {
reSumText2();
};
function Tonumber(numX) {
return Number(numX.replace(".", "").replace(" ", "").replace(",", "."));
}
function reSumText2() {
var num1 = Tonumber(document.getElementById("n182853134").value);
var num2 = Tonumber(document.getElementById("n182853151").value);
var num3 = Tonumber(document.getElementById("n182853118").value);
var num4 = Tonumber(document.getElementById("n182849952").value);
var sum2 = num1 + num2 + num3 + num4;
var sum3 = sum2.toLocaleString("de-DE");
document.getElementById("2").innerHTML = sum3;
}
</script>
Both of the functions "reSumText1" and "reSumText2" work separately, but not together on the same page, since they both use the element n182849952. Is there a way to work around?
Thanks a lot in advance!
Each element only has one onBlur method. You are overwriting the onBlur method in both places, so the second script erases the onBlur method you assigned in the first. You need to assign both functions at the same time.
Like this:
document.getElementById("n182849949").onblur = function () {
reSumText1();
reSumText2();
};
I'm sorry if I misunderstood, but I believe that only the second function looks like it's running because they're both setting the innerHTML value of the HTML element in question. So the first function is running, but the second one is just overwriting it so fast that you can't tell.
Again, if I misunderstood the question, please let me know, so I can edit my answer.