Replace .innerHTML with another .innerHTML - javascript

I'm trying to show information depending on the value of two tags.
I got the first one to work.
When the value of __ix_data_shared_int_80_ is 0 nothing is showing, when the value is 1 it will show DV and when the value is 2 it will show AV.
But I can't get the number to work.
When __ix_data_shared_int_80_ has the value of 0 I don't want any information,
when the value is 1 I would like number to be equal to the value of __ix_data_shared_uint_80_ and when the value is 2 I would like number to be equal to the value of "__ix_data_shared_uint_80_` times 2.
<span id="type"></span>
<span id="number"></span>
<span data-ix-tag="__ix_data_shared_uint_80_" id="valve" data-ix-refresh="interval"></span>
<script>
function GetValveTypeString(tag) {
if (tag.value == 0) {
document.getElementById("type").innerHTML = "";
}
else if (tag.value == 1) {
document.getElementById("type").innerHTML = "DV";
}
else if (tag.value == 2) {
document.getElementById("type").innerHTML = "AV";
}
}
iX.createTag('__ix_data_shared_int_80_', GetValveTypeString, 'interval')
</script>
<script>
var valveID = document.getElementById("valve").innerHTML;
function GetValveID(tag) {
if (tag.value == 0) {
document.getElementById("number").innerHTML = "";
}
else if (tag.value == 1) {
document.getElementById("number").innerHTML = valveID;
}
else if (tag.value == 2) {
document.getElementById("number").innerHTML = valveID * 2;
}
}
iX.createTag('__ix_data_shared_int_80_', GetValveID, 'interval')
</script>

It is because {document.getElementById("valve")} is returning empty string and you are trying to manipulate empty string

Related

Double Condition

It will make selection words starting with "p" and ending with "a". Why it didnt work?
function checkWord(word) {
if (word.charAt(0) = 'p' && word.charAt(word.length - 1) = 'a') {
return true;
} else {
return false;
}
= is used for assigning values, not checking them. Use == for checking the values and === for checking value and types. So, your code should be like:
function checkWord(word) {
if (word.charAt(0) === 'p' && word.charAt(word.length - 1) === 'a') {
return true;
} else {
return false;
}
This should do the trick.
You didn't put 2 equals to if you only put 1 equals you are assigning it and if you put 2 equals you're comparing it the. below code should help
/* Check weather the first letter is equals to p and the last letter is equals to a. */
function checkWord(word) {
let firstPAndLastA = false;
if(word != null){
if (word.charAt(0) == 'p' && word.charAt(word.length - 1) == 'a') {
firstPAndLastA = true;
} else {
firstPAndLastA = false;
}
}
return firstPAndLastA;
}
//Calling Function
console.log(checkWord("ppoa"))

Create a MR and MC in a javascript calculator

Idealy, I would like my little project to have the memory functions M-, M+, MR and MC.
I was thinking of separate functions and variables to hold the M- and M+.
Is this a normal approach or there is a better one ?
Any idea what might be wrong with my script ? if there is something wrong ?
the number-display ID is the actual calculator screen
the code is :
$(document).ready(function(){
var display = "";
var operators = ["/", "*", "-", "+"];
var decimalAdded = false;
$("button").click(function() {
var key = $(this).text();
//update screen by adding display string to screen with maximum 19 numbers viewable
function updateDisplay() {
if (display.length > 19) {
$("#number-display").html(display.substr(display.length - 19, display.length));
} else {
$("#number-display").html(display.substr(0, 19));
}
}
//clear all entries by resetting display and variables
if (key === "AC" || key === "ON" || key === "MC") {
decimalAdded = false;
display = "";
$("#number-display").html("0");
}
else if (key === "OFF") {
decimalAdded = false;
display = "";
$("#number-display").html("");
}
//clear previous character and reset decimal bool if last character is decimal
else if (key === "CE") {
if (display.substr(display.length - 1, display.length) === ".") {
decimalAdded = false;
}
display = display.substr(0, display.length - 1);
updateDisplay();
}
//add key to display if key is a number
else if (!isNaN(key)) {
display += key;
updateDisplay();
}
//check that . is the first in the number before adding and add 0. or just .
else if (key === ".") {
if (!decimalAdded) {
if(display > 0){
display += key;
}
else {
display += "0" + key;
}
decimalAdded = true;
updateDisplay();
}
}
//if key is basic operator, check that the last input was a number before inputting
else if (operators.indexOf(key) > -1) {
decimalAdded = false;
//first input is a number
if (display.length > 0 && !isNaN(display.substr(display.length - 1, display.length))) {
display += key;
updateDisplay();
}
// allow minus sign as first input
else if (display.length === 0 && key === "-") {
display += key;
updateDisplay();
}
}
// calculate square root of number
else if ( $(this).id === "sqrt") {
var tempStore = display.html();
$("#number-display").html(eval(Math.sqrt(tempStore)));
decimalAdded = false;
}
// change sign of number
else if ($(this).id === "plusmn") {
var newNum = display * -1;
$("#number-display").html(newNum);
}
// create memory plus and minus and calculate MR
else if (key === "M-") {
}
else if (key === "M+") {
}
// percentage function
else if (key === "%"){
}
else if (key == "=") {
//if last input is a decimal or operator, remove from display
if (isNaN(display.substr(display.length - 1, display.length))) {
display = display.substr(0, display.length - 1);
}
var calc = display;
calc = eval(calc);
display = String(calc);
if (display.indexOf('.')) {
decimalAdded = true;
} else {
decimalAdded = false;
}
$("#number-display").html(display);
}
});});
One alternative is a switch statement, which would look something like:
switch (key) {
case "M-":
// do stuff
break;
case "M+":
// do stuff
break;
case "%":
// do stuff
break;
case "=":
// do stuff
break;
}
More documentation on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

JS Empty focused Input

If the user enters an invalid number, I want to empty the input. Negative numbers and numbers that are decimal are not allowed.
This is my Js Function:
function calcPrice() {
var count = $('#placeCount').val();
if(count%1 == 0 && count > 0) {
if(count == 0) {
var output = "";
} else if(count == 1) {
var output = "€ 2,49";
} else if(count > 1 && count != 0) {
var output = ("€ " + (2*count-0.01));
}
}
else {
$('#placeCount').html("");
}
$('#priceOutput').html(output);
}
But somehow the input is not empty if I enter a count that goes into the else section.
change the value of the input with val() instead of html():
function calcPrice() {
var count = $('#placeCount').val();
if(count%1 == 0 && count > 0) {
if(count == 0) {
var output = "";
} else if(count == 1) {
var output = "€ 2,49";
} else if(count > 1 && count != 0) {
var output = ("€ " + (2*count-0.01));
}
}
else {
$('#placeCount').val("");
}
$('#priceOutput').html(output);
}

Sum with jquery not working

I have a lot of labels as shown on a page. I want to sum the values and store them in final_cpa.
HTML :
<label class="tmpcpa">32.1</label>
JS :
function calculate_final_cpa() {
var final_cpa = 0;
var allfilled = false;
$('.tmpcpa').each(function () {
if ($(this).val() != 0) {
final_cpa += parseInt($(this).text()) || 0;
allfilled = true;
} else {
allfilled = false;
}
});
console.log(final_cpa);
console.log(allfilled);
}
var run = setInterval(calculate_final_cpa, 500);
However final_cpa is always 0 and allfilled remains false.
That because label don't have a value attribute so the .val() function will always return an empty string, you have to use .text() instead to get the text content inside the label element :
if ($(this).val() != 0) {
Should be :
if ($(this).text() != 0) {
NOTE : as Rayon mentioned in the comment below text() will always return string so better to change the zero in condition to string '0'.
Hope this helps.
function calculate_final_cpa() {
var final_cpa = 0;
var allfilled = false;
$('.tmpcpa').each(function () {
if ($(this).text() != '0') {
final_cpa += parseInt($(this).text()) || 0;
allfilled = true;
} else {
allfilled = false;
}
});
console.log(final_cpa);
console.log(allfilled);
}
calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
Check $(this).text() != "" instead of $(this).val() != 0 as You can not use .val() for getting label text. .text() will give you text of label
if ($(this).text() != "" && $(this).text() != "0") {
....
}
First thing, you need to use .text() instead of .val() to get the text inside a label. Also, if you are expecting your result to contain decimal digits, you need to use parseFloat():
function calculate_final_cpa() {
var final_cpa = 0;
var allfilled = false;
$('.tmpcpa').each(function () {
if ($(this).text() != 0) {
final_cpa += parseFloat($(this).text()) || 0;
allfilled = true;
} else {
allfilled = false;
}
});
console.log(final_cpa);
console.log(allfilled);
}
calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<br />
<label class="tmpcpa">32.1</label>
Change
if ($(this).val() != 0)
to
if (parseInt($(this).text()) != 0)
Beside your code had an error, you should check the content of the table before parsing them. And because you use decimals in your example, you should switch from parseInt to parseFloat too.
And your allfilled varibale makes no sense, because if the last element of .tmpcpa was empty, it will be false again. So i removed it.
function calculate_final_cpa() {
var final_cpa = 0;
$('.tmpcpa').each(function () {
var content = $(this).text();
final_cpa += IsNumeric(content) ? parseFloat(content) : 0;
});
console.log(final_cpa);
}
Test it with .text instead of val() as label has no value property
Use Unary plus(+)/Number operator instead of parseInt as parseInt will ignore floating point
Use length of lable-elements to test whether all the label has values !== 0
function calculate_final_cpa() {
var final_cpa = 0;
var countOfFilled = 0;
$('.tmpcpa').each(function() {
if ($(this).text() !== '0') {
final_cpa += +($(this).text()) || 0;
++countOfFilled;
}
});
console.log('Total: ' + final_cpa);
console.log('All filled ' + $('.tmpcpa').length === countOfFilled);
}
calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">0</label>

Validate different fields depending on what is selected in a dropdown in a form with jQuery?

I have the following code to validate some fields on a sharepoint newform.aspx. To not submit the form in sharepoint I must return a false statement to the default function PreSaveItem.
Validation:
//bind a change event to all controls to validate
$("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic
Priority]").change(function(){
checkControls()
});
//the change event function - check the status of each control
function checkControls(){
//set a variable to count the number of valid controls
var controlsPassed = 0;
//set up a selector to pick .each() of the target controls
$("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic
Priority]").each(function(){
//if the control value is not zero AND is not zero-length
var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl00_UserField_hiddenSpanData').val();
var val = $(this).val();
if($(this).is(':hidden') || (val != 0 && val.length != 0 && txt.length != 0)) {
//add one to the counter
controlsPassed += 1;
}
});
//call the PreSaveItem function and pass the true/false statement of 5 valid controls
return (controlsPassed == 5)
}
function PreSaveItem() {
return checkControls()
}
I want to validate different elements depending on what I have selected in a dropdown list called Item Level.
I get the values from Item Level with:
$("select[title='Item Level']").change(function() {
var itemLevel = $(this).val();
if (itemLevel == "Strategic Objective") {
alert(itemLevel);
}
if (itemLevel == "Strategic Priority") {
alert(itemLevel);
}
if (itemLevel == "Milestone Action") {
alert(itemLevel);
}
if (itemLevel == "Performance Measure") {
alert(itemLevel);
}
});
I thought it would be easy to just chuck the validation code into the if's but it doesn't work.
For example:
$("select[title='Item Level']").change(function() {
var itemLevel = $(this).val();
if (itemLevel == "Strategic Objective") {
alert(itemLevel);
}
if (itemLevel == "Strategic Priority") {
alert(itemLevel);
}
if (itemLevel == "Milestone Action") {
//bind a change event to all controls to validate
$("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic
Priority]").change(function(){
checkControls()
});
//the change event function - check the status of each control
function checkControls(){
//set a variable to count the number of valid controls
var controlsPassed = 0;
//set up a selector to pick .each() of the target controls
$("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic
Priority]").each(function(){
//if the control value is not zero AND is not zero-length
var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl00_UserField_hiddenSpanData').val();
var val = $(this).val();
if($(this).is(':hidden') || (val != 0 && val.length != 0 && txt.length != 0)) {
//add one to the counter
controlsPassed += 1;
}
});
//call the PreSaveItem function and pass the true/false statement of 5 valid controls
return (controlsPassed == 5)
}
function PreSaveItem() {
return checkControls()
}
alert(itemLevel);
}
if (itemLevel == "Performance Measure") {
alert(itemLevel);
}
});
and in the item level item Strategic Objective validate some other elements. Any ideas?
Thanks in advance.
Edit: the working code with help from casablanca:
function checkControls() {
var itemLevel = $("select[title='Item Level']").val();
switch (itemLevel) {
case 'Strategic Objective':
var controlsPassed = 0;
$("input[id$=UserField_hiddenSpanData]").each(function(){
var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_hiddenSpanData').val();
var val = $(this).val();
if(val != 0 && val.length != 0 && txt.length != 0) {
//add one to the counter
controlsPassed += 1;
}
});
return (controlsPassed == 1)
case 'Milestone Action':
var controlsPassed = 0;
$("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic
Priority]").each(function(){
var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_hiddenSpanData').val();
var val = $(this).val();
if($(this).is(':hidden') || (val != 0 && val.length != 0 && txt.length != 0)) {
//add one to the counter
controlsPassed += 1;
}
});
return (controlsPassed == 5)
case 'Performance Measure':
var controlsPassed = 0;
$("select[title=Strategic Objective],select[title=Strategic Priority]").each(function(){
var val = $(this).val();
if(val != 0 && val.length != 0) {
//add one to the counter
controlsPassed += 1;
}
});
return (controlsPassed == 2)
case 'Strategic Priority':
var controlsPassed = 0;
$("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective]").each(function(){
var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_hiddenSpanData').val();
var val = $(this).val();
if($(this).is(':hidden') || (val != 0 && val.length != 0 && txt.length != 0)) {
//add one to the counter
controlsPassed += 1;
}
});
return (controlsPassed == 4)
}
}
function PreSaveItem()
{
return checkControls()
}
Okay, so this is the problem I see in your current script: binding an event handler is permanent, so if you choose "Milestone Action" even once and then switch to another option, you will still validate the original selection.
You can do away with all the change handlers and instead add your conditions directly in checkControls, validating the necessary elements based on the current selection. I've also replaced your ifs with a switch since it's cleaner:
function checkControls() {
var itemLevel = $("select[title='Item Level']").val();
switch (itemLevel) {
case 'Strategic Objective':
// Perform validation for this item level
return result; // true or false
case 'Milestone Action':
// Perform validation for this item level
return result; // true or false
// etc...
}
}
Update: For example, if when "Milestone Action" is selected, you would like to check if some text field is not empty, then under case 'Milestone Action':, you would add something like this:
if ($('something').val().length > 0)
return true;
else
return false;
Edit: If you have access to the form code (I'm not familiar with SharePoint), you should assign IDs to your form elements so you can reference them like $('#itemLevel') instead of having to use a long selector.

Categories

Resources