Добавить вместе номера в отдельных DIV

Question

(обязательно, я новичок в этом) Я пытаюсь сделать это ...

1. Получить содержимое (номер) DIV ID.
2. Добавитьэти числа вместе
3. Напечатайте их в "at" DIV.

Я знаю, это должно быть чертовски просто.Но я не могу обернуть голову, почему это не работает.Я хочу узнать, ПОЧЕМУ это не работает.Я не хочу, чтобы вы, ребята, писали это для меня.Я хочу учиться.Вот мой код ...

var at = document.getElementById("a-total");
var ac = document.getElementById("a-coffee").innerHTML;
var ah = document.getElementById("a-hobby").innerHTML;
var af = document.getElementById("a-fundme").innerHTML;

var addopt = ac + ah + af;

function aTotal (){
    if (addopt >= 0){
        at.innerHTML = addopt;
    } else {
        console.log("tis broken");
    }
}

aTotal();

Он выводит правильно, но просто не складывает числа в DIV вместе.Он размещает их рядом, а не складывает их вместе.

Answer 1

Вы пытаетесь добавить строки вместо чисел.

innerHTML возвращает строку в элементе HTML.

Вы должны parseInt или parseFloat для содержимого иметь числа.

<script>
var at = document.getElementById("a-total");
var ac = document.getElementById("a-coffee").innerHTML;
var ah = document.getElementById("a-hobby").innerHTML;
var af = document.getElementById("a-fundme").innerHTML;

// Values are taken as string and mus be converted to int.
// We check also that a value is not undefined.
ac = isNaN(parseInt(ac)) ? 0 : parseInt(ac);
ah = isNaN(parseInt(ah)) ? 0 : parseInt(ah);
af = isNaN(parseInt(af)) ? 0 : parseInt(af);

var addopt = ac + ah + af;

function aTotal (){
    if (addopt >= 0){
        at.innerHTML = addopt;
    } else {
        console.log("tis broken");
    }
}

aTotal();
</script>

Answer 2

Вам нужно проанализировать innerHTML на целые числа или числа с плавающей запятой, чтобы иметь возможность выполнять математические операции над ними.Проверьте приведенный ниже код, который берет текст и разбирает его на целые числа:

var addopt = parseInt(ac) + parseInt(ah) + parseInt(af);

Answer 3

Вы должны проанализировать содержимое div s по числу, так как innerHTML возвращает строку.

Так что либо var addopt = +ac + +ah + +af;, либо var addopt = parseInt(ac) + parseInt(ah) + parseInt(af); должны работать для вас.

Answer 4

Это часто случается.Что вам нужно сделать, это преобразовать в целое число, потому что он читает его как строку, используя ParseInt (variable) или ParsefLoat (variable) ParsefLoat (переменная) также может использовать .toFixed (decimal_places)

Answer 5

Содержимое вашего div - это строки, даже если они представляют собой числа.Так что, если ваши div-ы имеют значения «1», «2» и «3», добавив их вместе, вы получите «123», а не 6, как вы могли ожидать.Посмотрите на функцию parseInt, чтобы увидеть, как вы можете превратить ваши строки в числа.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Answer 6

Это потому, что вы только делаете string объединение .

Вам необходимо преобразовать значения в numbers, так как .innerHTML() возвращает string.Вот как следует работать:

var addopt = +ac + +ah + +af;

Примечание:

Лучше использовать .innetrText() или .textContent() больше .innerHTML, чтобы избежать получения HTML наценок внутри ваших элементов, если они есть в результате.