Вытащить из тега span, обработать и перезаписать

[vetedde]

Здравствуйте!
Я, как водится, новичок в программировании и начала "с места в карьер"=)
Мне нужно обработать форму особым образом и для этого я пытаюсь отладить маленький кусочек кода, где мне нужно
1)Считать значение span
2)Проверить был ли нажат чекбокс. Если да, то к общей сумме прибавить значение из span. Если нет - вычесть.
4)Записать внизу страницы в специальное место

HTML
<input type="checkbox" onchange="calc()" value="Услуга"/><span id="mon">3000</span>Услуга
<br/>
<div>Стоимость: <span id="result">0</span> руб.</div>

JS

*/
function calc() {


var mon = document.getElementById("mon");
var result = document.getElementById("result");
var msg = document.getElementedById("msg");
var price = 0;
price += parseInt(mon.value);
result.innerHTML = price;
}

</script>
Я даже без проверки на нажатие не могу значение из span обработать. Помогите, пожалуйста!

[tsigel]

не mon.value, а parseInt(mon.innerHTML)

[vetedde]

Ничего не изменилось=(
А почему innerHTML, я же вроде через document.getElementById получаю к ней доступ в функции?
И еще как сделать проверку нажат чекбокс или нет?

[Safort]

vetedde,
пара просьб на будущее:
1. Будь добр оформляй свой код, его очень не удобно читать. А ведь помощь нужна тебе, а не нам.
Как спросить, чтобы вам ответили
2. Пользуйся поиском перед тем, как создать тему. На все эти вопросы уже есть ответы.

Решение:

<input type="checkbox" onchange="calc()" value="Услуга"/>
  <span id="mon">3000</span> Услуга
  <br/>
  <div>Стоимость: <span id="result">0</span> руб.</div>
  <script>
    function calc() {
      var mon = parseInt(document.getElementById("mon").innerHTML);
 //считываем значение и приводим его к целочисленному типу
      var isChecked = document.querySelector('input').checked; //отмечен ли чекбокс
      var result = document.getElementById("result");  //куда выводить результат
      var price = 0;  //общая сумма

      // проверяем чекбокс
      if (isChecked) {
        price += mon;
      } else {
        price -= mon;
      }

      // var msg = document.getElementedById("msg");  //зачем тут это, если оно не используется?
      result.innerHTML = price;

    }
  </script>

[vetedde]

Огромное спасибо!
То, что не используется забыла подтереть.
Обязательно почитаю правило оформления!

[vetedde]

В коде выше price каждый раз присваивается 0, поэтому стоимость выводится или 3000, или - 3000. Я попыталась, чтобы функция вытаскивала из span значение по аналогии, но почему-то у меня не работает. Вот в чем я делаю ошибку?

<input type="checkbox" onchange="calc()" value="Услуга"/>
  <span id="mon">3000</span> руб. Услуга
  <br/>
  <div>Стоимость: <span id="result">0</span> руб.</div>

<script>
    function calc() {
      var mon = parseInt(document.getElementById("mon").innerHTML); //Получаем цену услуги
      var isChecked = document.querySelector('input').checked; //отмечен ли чекбокс
      var result = parseInt(document.getElementById("result").innerHTML); //Получаем итоговую сумму
      var price = 0;
      var price += result;
      // проверяем чекбокс
      if (isChecked) {
        price += mon;
      } else {
        price -= mon;
      }

      // var msg = document.getElementedById("msg");  //зачем тут это, если оно не используется?
      result.innerHTML = price;

    }
  </script>

[Safort]

Тут я вижу две ошибки:
1. Переменная result является числом, а ты пытаешься получить доступ к свойству result.innerHTML, которое отсутствует у числа.
2. Переменная price объявляется дважды.

[Safort]

Всё таки лучше подучить основы, а то от "с места в карьер" толку мало)

<input type="checkbox" onchange="calc()" value="Услуга"/>
  <span id="mon">3000</span> руб. Услуга
  <br/>
  <div>Стоимость: <span id="result">0</span> руб.</div>

  <script>
    
    function calc() {
      var mon = parseInt(document.getElementById("mon").innerHTML); // "1) считать значение span"
      var isChecked = document.querySelector('input').checked; //отмечен ли чекбокс
      var elResult = document.getElementById("result"); // куда будем записывать результат
      var result = parseInt(elResult.innerHTML); // общая сумма, так?
      var price;
      
      // "2)Проверить был ли нажат чекбокс."
      if (isChecked) {
        // "Если да, то к общей сумме прибавить значение из span."
        price = result + mon;
      } else {
        // "..Если нет - вычесть."
        price = result - mon;
      }
 
      // "4) Записать внизу страницы в специальное место"
      elResult.innerHTML = price;
 
    }

  </script>

[vetedde]

Согласна, что резковато и бестолково, но возникла жесткая необходимость. Сейчас нашла хорошую книгу стараюсь разобраться.
Большое Вам спасибо!

[Safort]

vetedde,
не за что. Обращайтесь)