DOM과 함께하는 JavaScript 코드의 오류 찾기
다음 작업들에서 어떤 프로그래머가 코드를 작성했고, 아마도 그 안에 실수가 있을 수 있습니다. 코드가 설명한 대로 작동하는지 확인해야 합니다. 코드가 올바르게 작동하지 않는다면, 오류를 수정해야 합니다.
코드는 각 단락의 끝에 텍스트를 추가해야 합니다:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelector('p');
elems.textContent += '!';
단락을 클릭하면 그 값이 1씩 증가해야 합니다:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function() {
this.textContent += Number(1);
});
}
버튼을 클릭하면 단락의 텍스트가 굵게 표시되어야 합니다:
<p>text</p>
<button>click</button>
let button = document.querySelector('button');
let elem = document.querySelector('p');
button.addEventListener('click', function() {
elem.innerHTML = '<b>elem.innerHTML</b>';
});
버튼을 클릭하면 단락에서 나온 숫자의 합이 출력되어야 합니다:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>
let button = document.querySelector('button');
let elems = document.querySelector('p');
button.addEventListener('click', function() {
let sum = 0;
for (let elem of elems) {
sum += Number(elems.textContent);
}
console.log(sum);
});
단락을 클릭하면 지정된 텍스트가 그 끝에 추가되어야 합니다:
<p>1</p>
<p>2</p>
<p>3</p>
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', () => {
this.textContent += '!';
});
}
버튼을 클릭하면 각 단락의 텍스트가 굵게 표시되어야 합니다:
<p>text1</p>
<p>text2</p>
<p>text3</p>
<button>click</button>
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
button.addEventListener('click', function() {
for (let elem of elems) {
elem.innerHTML = '<b>+elem.innerHTML+</b>';
}
});
버튼을 클릭하면 단락에서 나온 숫자의 합이 콘솔에 출력되어야 합니다:
<p>1</p>
<p>2</p>
<p>3</p>
<button>click</button>
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
let sum = 0;
for (let elem of elems) {
sum = elem.textContent + 1;
button.addEventListener('click', function() {
console.log(sum);
});
}
숫자가 입력 필드에 입력됩니다. 버튼을 클릭하면 입력 필드의 숫자 합계가 콘솔에 출력되어야 합니다:
<input>
<input>
<input>
<button>click</button>
let button = document.querySelector('button');
let elems = document.querySelectorAll('input');
let sum = 0;
for (let elem of elems) {
sum += elem.value;
}
button.addEventListener('click', function() {
console.log(sum);
});
숫자가 처음 두 개의 입력 필드에 입력됩니다. 버튼을 클릭하면 세 번째 입력 필드에 이 숫자들의 합계가 출력되어야 합니다:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">click</button>
let btn = document.querySelector('#btn');
let inp1 = document.querySelector('#inp1');
let inp2 = document.querySelector('#inp2');
let inp3 = document.querySelector('#inp3');
btn.addEventListener('click', function() {
inp3.textContent = inp1.textContent + inp2.textContent;
});
숫자가 처음 두 개의 입력 필드에 입력됩니다. 버튼을 클릭하면 단락에 이 숫자들의 합계가 출력되어야 합니다:
<input id="inp1">
<input id="inp2">
<p id="res"></p>
<button id="btn">click</button>
let btn = document.querySelector('btn');
let res = document.querySelector('res');
let inp1 = document.querySelector('inp1');
let inp2 = document.querySelector('inp2');
button.addEventListener('click', function() {
res.value = inp1.value + inp2.value;
});
버튼을 클릭하면 각 입력 필드의 텍스트가 그것의 data 속성 텍스트와 일치하는지 확인해야 합니다:
<input data-text="text1">
<input data-text="text2">
<input data-text="text3">
<button id="btn">click</button>
let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')
button.addEventListener('click',function() {
for (let input of inputs) {
if (input.value === input.dataset) {
input.classList.add('right')
} else {
input.classList.add('wrong')
}
}
});
버튼을 클릭하면 각 입력 필드의 텍스트가 배열의 해당 요소 텍스트와 일치하는지 확인해야 합니다:
<input>
<input>
<input>
<button id="btn">click</button>
let inputs = document.querySelectorAll('input')
let button = document.querySelector('#button')
let texts = [
'text1',
'text2',
'text3',
];
button.addEventListener('click',function() {
for (let input of inputs) {
for (let text of texts) {
if (input.value === text) {
input.classList.add('right')
} else {
input.classList.add('wrong')
}
}
}
});
숫자가 입력 필드에 입력됩니다. 버튼을 클릭하면 콘솔에 입력된 숫자들의 합계가 출력되어야 합니다:
<input>
<input>
<input>
<button id="btn">click</button>
let inputs = document.querySelectorAll('inputs');
let btn = document.querySelector('#btm');
let sum = 0;
btn.addEventListener('click', function() {
for (let input of inputs) {
sum += Number(input);
}
console.log(sum);
});
숫자가 처음 두 개의 입력 필드에 입력됩니다. 버튼을 클릭하면 세 번째 입력 필드에 이 숫자들의 합계가 출력되어야 합니다:
<input id="inp1">
<input id="inp2">
<input id="inp3">
<button id="btn">click</button>
let btn = document.querySelector('#btn');
let inp1 = document.querySelector('#inp1');
let inp2 = document.querySelector('#inp2');
let inp3 = document.querySelector('#inp3');
let sum = inp1.value + inp2.value;
btn.addEventListener('click', function() {
inp3.value = sum;
});
숫자가 입력 필드에 입력됩니다. 포커스를 잃으면 콘솔에 이 숫자의 자릿수 합계가 출력되어야 합니다:
<input id="inp">
let inp = document.querySelector('#inp').value;
inp.addEventListener('blur', function() {
let digits = +inp.split('');
let sum = 0;
for (let digit of digits) {
sum += digit;
}
console.log(sum);
});
