Develop Reference

how do i sum all array arguments

I want to have a webpage with one input box and two button. first button for adding input box value to my array and the second to sum all array values. but it return 0 :(
<input type="text" placeholder="Enter number" id="input">
<button id="add">Add to Array</button>
<button id="sum">Sum All</button>
<p id="text"></p>
<script>
var myArr = []; //contain numbers that i've inputed
var input = document.getElementById('input');
var addBtn = document.getElementById('add');
var sumBtn = document.getElementById('sum');
addBtn.onclick = function () {
myArr.push(input.value);
input.value = "";
}
function sumAll() {
var i , sum = 0;
for ( i in myArr.length ) {
sum += i;
}
return sum;
}
sumBtn.onclick = function(){
var paragraph = document.getElementById('text');
var a = sumAll();
paragraph.innerHTML = a;
}
</script>

You can use the for-of syntax to loop thru your array.
function sumAll() {
var i , sum = 0;
for ( i of myArr ) {
sum += Number(i);
}
return sum;
}

You need to run your for loop properly:
When you say for ( i in myArr.length ) {the value of i comes out as undefined so the summation never happens. You should use debugging to figure out such issues.
function sumAll() {
var i, sum = 0;
for (i = 0; i < myArr.length;i++) {
sum += +myArr[i];
}
return sum;
}
Notice +myArr[i];that uses unary operator +. This can attempt to convert the string in the input field to number(both int and floats).
https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators

This should be way to go..
1.You have to use parseInt to treat values as ints
2.Loop correctly over array
<script>
var myArr = []; //contain numbers that i've inputed
var input = document.getElementById('input');
var addBtn = document.getElementById('add');
var sumBtn = document.getElementById('sum');
addBtn.onclick = function () {
myArr.push(input.value);
input.value = "";
}
function sumAll() {
var i , sum = 0;
for ( i in myArr ) {
sum += parseInt(myArr[i]);
}
return sum;
}
sumBtn.onclick = function(){
var paragraph = document.getElementById('text');
var a = sumAll();
paragraph.innerHTML = a;
}
</script>

Qualtrics Sum Matrix Table

I'm trying to recreate the matrix in Qualtrics from this image:
The Javascript I found uses text entry but I think profile multiple answer would be better suited for this question. I need a way to allow users to select multiple items and display their current total. My sincere thanks to anyone that can point me in the right direction.
Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;
$(qid).select('td.c4').last().down().hide();
$(qid).select('td.c5').last().down().hide();
var totalInput = $(qid).select('td.c6').last().down();
totalInput.setAttribute("readonly", "readonly");
totalInput.style.fontWeight = "bold";
var c6 = $(qid).select('td.c6');
for(var i=0; i < (c6.length - 1); i++) {
c6[i].down().observe("keyup", function(event) {
sumCol();
});
}
sumCol();
function sumCol() {
var total = 0;
for(var i=0; i < (c6.length - 1); i++) {
var inputValue = parseInt(c6[i].down().value);
if(isNaN(inputValue)) inputValue = 0;
c6[i].down().value = inputValue;
total = total + inputValue;
}
totalInput.value = total;
if(total == 100) totalInput.style.color = "";
else totalInput.style.color = "red";
}
});

compare a select option value and a value from URL

I have a select tag to choose categories, each option contain the category number as value.
The category number is in the URL string.
I'm trying to write a JS to check if the option value is the same as the category number in the URL and if so make the option selected. so far the script dosnot work.
What am I doing wrong?
here is the code:
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] === VarSearch){
return KeyValuePair[1];
}
}
}
function compareValue(){
var x = document.getElementById("selectcategory").length;
for (var i = 0; i < x; i++){
var categNo = document.getElementById("selectcategory").options[i];
var UrlValue1 = GetUrlValue('icid');
if (categNo === UrlValue) {
document.getElementById("selectcategory").options[i].selected = true;
}
alert(UrlValue1);
}
}
if needed, I will send a link to the work.
if doing that with jquery is easier, i will be happey to learn.
thanx.

The problem is that categNo should be the value of the corresponding option tag. Also it's better to cache select element and not requery DOM in the loop:
function compareValue() {
var select = document.getElementById("selectcategory");
var x = select.options.length;
for (var i = 0; i < x; i++) {
var categNo = document.getElementById("selectcategory").options[i].value;
var UrlValue = GetUrlValue('icid');
if (categNo === UrlValue) {
select.options[i].selected = true;
}
}
}
Demo: http://jsfiddle.net/dj7c6sdL/

How to assign radio buttons a value in javascript

What I need to do is turn the 4 different values (when clicked) on the page into a number that I can use to calculate the output in the chart.
http://jsfiddle.net/nlem33/eyGMu/7/
var min_value = 0,
max_value = 10,
units = 0,
price = 0;
var sliderHandler = function (event, ui) {
var newdata = [],
newdata2 = []
data = [],
sum = 0;
if(this.id === 'slider1') {
$('#slider1_value').html(ui.value);
units = ui.value;
} else {
$('#slider2_value').html('$' + ui.value);
price = ui.value;
}
for(var i = 0; i < 12; i++) {
data.push(units * price);
for(var j = 0; j < i; j++)
sum += data[j];
newdata.push(229 * units * i);
newdata2.push(sum);
}
console.log(newdata);
chart.series[0].setData(newdata2);
chart.series[1].setData(newdata);
}

Add a variable called selected and use this event handler:
var selected = 1;
$(document).ready(function() {
$(".product").click(function(){
selected = this.id.replace("product", "");
alert(selected);
});
});
See the updated fiddle. Then you can use the selected variable anywhere.
In order to use the value of a radio button rather than the number in its id, use the following code instead:
var selected = 1;
$(document).ready(function() {
$("input[name=chooseProduct]").change(function(){
selected = $(this).val();
alert(selected);
});
});
See next updated fiddle for that example as well.

jQuery: Initial data for rating

I have found a pretty stuff for rating entries: http://www.fyneworks.com/jquery/star-rating/. It's good and easy. But I still need some more.
My code:
<div data-rating="4/5" class="entry"></div>
Desired function:
function init_rating(rate) { //... }
$(".entry").html( init_rating($(this).attr("data-rating")) );
Thanks much,

Here:
function init_rating(selector) {
var entry = $(selector);
var output = "";
var input = "<input name=\"star\" type=\"radio\" class=\"star\""
var checked = " checked=\"checked\"";
var close = "/>";
var params = entry.attr("data-rating").split("/", 2);
var rating = parseInt(params[0]);
var total = parseInt(params[1]);
for (var i = 0; i < total; i++) {
output += input;
if (i == rating - 1) output += checked;
output += close;
}
entry.html(output);
$('input[type=radio].star').rating();
}
init_rating(".entry");
fiddle: http://jsfiddle.net/qcxvW/20/