-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdom-warmup1.html
75 lines (61 loc) · 2.78 KB
/
dom-warmup1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Warm Up</title>
</head>
<body>
<!-- TODO: add functionality such that the number in the input will be added to the total in the h1 when the button is clicked
No changes to the existing HTML is needed, other than adding jQuery or JavaScript.
-->
<h1 id="number-output">0</h1>
<form>
<input id="number-input" type="number" min="0" max="100">
<button id="add-btn">Add</button>
</form>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(function() {
"use strict";
// TODO: add functionality such that the number in the input will be added to the total in the h1 when the button is clicked
// No changes to the existing HTML is needed, other than adding the needed jQuery/JavaScript.
var btn = document.getElementById('add-btn')
var input = document.getElementById('number-input')
var counter = document.getElementById("number-output")
var output = 0
var listener = function onClickListener(e) {
e.preventDefault(e);
// console.log(input.value);
// console.log(counter.innerText)
parseFloat(input.value);
parseFloat(counter.innerText)
document.querySelector('#number-output').innerText = input + counter
}
btn.addEventListener('click', listener)
// =========== jQuery way walkthrough
// $('#add-btn').click(function(e) {
// e.preventDefault();
// let inputNumber = parseFloat($('#number-input').val());
// let outputNumber = parseFloat($('#number-output').text())
// $('#number-output').text(inputNumber + outputNumber)
// });
// vanilla JS walkthrough
// document.querySelector('button').addEventListener('click', function(e) {
// e.preventDefault();
// let input = parseFloat(document.querySelector('#number-input').value);
// let output = parseFloat(document.querySelector('#number-output').innerText);
// document.querySelector('#number-output').innerText = input + output;
// });
// HINTS
// add an event listener on the button click that will log to the console the number value in the text input
// (you will need to prevent the default button behavior of submitting the form)
// modify the event listener to parse the text value into a number
// target the output element inner text and parse it into a number
// add the input and output values together and update the output with the sum of the current input and output
});
</script>
</body>
</html>