How to update a single value without compromising the other values in an array?

Question

I am trying to update the DOM depending on the values given by the user.

I have this function:

function iterateOverArray(array){

   var oldArray = array;
   var newArray = "";

  for (var i = 0; i < oldArray.length; i++) {
      if (oldArray.includes(-1)) {
          newArray += " - " + oldArray[i];
      } else {
          newArray += " + " + oldArray[i];
      }

}

   return newArray;
}

The program should work like this:

If the array given is: [1, 5, 10] then you should see in the DOM this: 1 + 5 + 10 but if the array given is: [10, 2, -1, 10] then what you should see in the DOM is: 10 + 2 - 10 the negative number -1 should always represent - in the DOM.

What I am getting now is this:

And I don't want that, I just don't want to see that -1, I need only the - (subtract) sign.

The other issue I am having is that once you put a negative number, the new values/numbers that will see in the DOM comes with the negative sign even if the value given it's positive:

Here is the code if you want to take a look

Any suggestions ?

Moishe Lipsker · Accepted Answer

Try changing the if statement check if the previous item is -1. If it was, then append -. Otherwise, if this is the first item or the previous item was -1, append the current item. Otherwise, append + plus the current item:

if (oldArray[i] == -1) {
  newArray += " - ";
} else if (i == 0 || oldArray[i - 1] == -1) {
  newArray += oldArray[i];
} else {
  newArray += " + " + oldArray[i];
}

var arrayOfNumbers = [];
var column = 1;

function logingValues() {

  var values = $('input[name^=valuesToSum]').map(function(idx, elem) {
    newVal = $(elem).val();
    if (isNaN(newVal)) {
      newVal = 0;
    }
    return parseInt(newVal);
  }).get();

  //console.log("Values aquired from inputs " + values);

  arrayOfNumbers = values;

  //console.log("Values inserted on Array " + arrayOfNumbers);
}


function removeElement(id) {
  $('#' + id).remove();
  //console.log("element #" + id + " was eliminated");
}

function iterateOverArray(array) {

  var oldArray = array;
  var newArray = "";

  for (var i = 0; i < oldArray.length; i++) {
    if (oldArray[i] == -1) {
      newArray += " - ";
    } else if (i == 0 || oldArray[i - 1] == -1) {
      newArray += oldArray[i];
    } else {
      newArray += " + " + oldArray[i];
    }

    //console.log('__newArray', newArray);
    //console.log('__oldArray', oldArray);
  }

  return newArray;
}

function addElement(whereToPrint) {

  logingValues();

  var newArray = iterateOverArray(arrayOfNumbers);

  var printId = "print" + whereToPrint;

  //console.log(printId);

  //console.log("we can see the array like this " + arrayOfNumbers);

  $('#' + printId).html(newArray);

  //console.log('Element was created');


  column += 1;

  var newInput = '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';
  newInput = newInput + '';

  $('.elemPlaceHold').append(newInput);

}

function loadingBar() {

  var summingBar = '
';

  $('.spinner').append(summingBar);
}

function caculationEffect(countTotal) {
  $('#result').html("");
  loadingBar();

  setTimeout(function() {

    $('.spinner').html("");
    $('#result').html(countTotal);
  }, 2000);
}

function calculate() {
  //console.log("is calculating....");
  logingValues();
  var total = 0;
  var shouldSubtract = false;

  for (var i = 0; i < arrayOfNumbers.length; i++) {
    if (arrayOfNumbers[i] === "") continue;
    var currentNumber = parseInt(arrayOfNumbers[i], 10);

    if (isNaN(currentNumber)) {
      currentNumber = 0;
    }

    if (currentNumber === -1) {
      shouldSubtract = true;
    } else {
      if (shouldSubtract) {
        total -= currentNumber;
        shouldSubtract = false;
      } else {
        total += currentNumber;
      }
    }
  }
  caculationEffect(total);
  //console.log('countTotal', total);
}

.spinner {
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.rem,
.sum {
  border-radius: 100%;
}
.new {
  margin-left: 5px;
}




  
  

  
  
  
  
  
  
  




  
    Array Calculator
    
      Please create your array by filling spaces with Numbers, its calculation will be based on provided logic.
      

        
          
            
          
          
            
          
          
            
          
          
            
          
        

      
      

      
        The total calculation of the array is

How to update a single value without compromising the other values in an array?

Answers (2)

Related Questions