не передается значение value при динамическом изменении
 

Добрый день!

У меня есть поля <input> куда с помощью javascripta подставляются различные значения value при клике на картинки.
После этого я пытаюсь оперировать этими новыми значениями (отслеживая изменения этих imput'ов) , но ничего не получается.
Если я ввожу значения в поля вручную - то все работает, если изменяю их силами javascript - то нет. Буду очень благодарна любым подсказкам.

Пожалуйста, подскажите в какую сторону копать.

<script>
            var calculate = (
                function () {
                    var

                        quantityInput = document.getElementById("quantity"),
                        levelInput = document.getElementById("level"),
                        amountInput = document.getElementById("money")
                    ;
                    function calculateIt() {
                        var 

                            quantity = parseInt(quantityInput.value)
                            level = parseInt(levelInput.value)
                            amount = parseInt(amountInput.value)
                        ;
                        amount = amount || 0;
                        document.getElementById("result").innerHTML = (quantity + level) * amount + " р.";
                    }
                    return quantityInput.oninput  = levelInput.oninput  = amountInput.oninput  = calculateIt;
                }
            )()(); 
        </script>

<div id = "form">
              <form name="myForm">
<a href="#" onclick="document.myForm.money.value = '20';"> <img src="images.png"> </a>
<a href="#" onclick="document.myForm.money.value = '30';"> <img src="images.png"> </a>
<a href="#" onclick="document.myForm.money.value = '40';"> <img src="images.png"> </a><br>
                    <input type ="text" name ="money" value ="" size ="25" maxlength ="30" id = "money" ><br>
					
<a href="#" onclick="document.myForm.quantity.value = '20';"> <img src="images.png"> </a>
<a href="#" onclick="document.myForm.quantity.value = '30';"> <img src="images.png"> </a>
<a href="#" onclick="document.myForm.quantity.value = '40';"> <img src="images.png"> </a><br>	
				
                    <input type ="text" value ="" name = "quantity" id="quantity" ><br>
<a href="#" onclick="document.myForm.level.value = '20';"> <img src="images.png"> </a>
<a href="#" onclick="document.myForm.level.value = '30';"> <img src="images.png"> </a>
<a href="#" onclick="document.myForm.level.value = '40';"> <img src="images.png"> </a><br>					
					
                    <input type ="text" value ="" name ="level" id="level" >
                </form>
            <div class = "result" id = "result"></div>
        </div>

Встречный вопрос:
- Кто тебя надоумил так куралесить с кодом?

var calculate = (function(){})()();

Никто. Пытаюсь разобраться с нуля по статьям и учебникам, пишу по аналогии. Если бы был кто-то, кто надоумливал, у него бы и спрашивала...

так как поймать новые значения iput'ов? Знаешь?

Например отслеживать события onchange или onkeyup...
Но если менять инпуты скриптом, события не наступают. :)

Спасибо, кэп :)
Я вижу, что они не наступают))
Нужен лайфхак, как все-таки отследить изменения.
Ну или как можно реализовать нужную мне задачу как-то иначе...

Хто? :blink:

Если ты меняешь данные скриптом - вызови нужный обработчик.