동일질문 html을 유지한채 진행한다면
8시간 전
js로 반복문을 통해서 td태그를 생성함과 동시에 배열에 집어 넣는 방법 말고
html로 테이블의 틀을 작성했다면,
각 칸들의 값을 어떻게 '칸들'변수에 집어 넣을 수 있을까요?
아래 질문하신분이랑 동일한 질문입니다.
8시간 전
js로 반복문을 통해서 td태그를 생성함과 동시에 배열에 집어 넣는 방법 말고
html로 테이블의 틀을 작성했다면,
각 칸들의 값을 어떻게 '칸들'변수에 집어 넣을 수 있을까요?
아래 질문만 답이없어 혹시 못보셨을까 다시 올려봅니다
for문하면 더 간단하게 할 수 있는데 foreach로 보여주신 이유가 무엇인가요???
2일 전
let arr = Array(45);
console.log(arr);
for (let i = 0; i < 45; ++i) {
arr[i] = i + 1;
}
가위바위보 질문있습니다
22일 전
가위바위보.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#computer {
width: 160px;
height: 200px;
background: url('https://imagescdn.gettyimagesbank.com/500/17/859/219/0/824700804.jpg') -30px -80px;
}
</style>
</head>
<body>
<div id="computer"></div>
<div>
<button id="scissor" class="btn">가위</button>
<button id="rock" class="btn">바위</button>
<button id="paper" class="btn">보</button>
</div>
<script src="가위바위보.js"></script>
</body>
</html>
------------------가위바위보.js
var left = 0;
setInterval(function () {
if (left === 0) {
left = '-175px';
} else if (left === '-175px') {
left = '-300x';
} else {
left = 0;
}
document.querySelector('#computer').style.background =
'url(https://imagescdn.gettyimagesbank.com/500/17/859/219/0/824700804.jpg) -30px -80px' + left + '0';
}, 100);
------------------질문
이미지 변경이 안되는데 어떤게 문제인지 모르겠습니다.
구구단 js 질문
1달 전
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>구구단</title>
</head>
<body>
<div id = "word1"></div>
<form id="form">
<input type="text" id="inputText">
<input type="button" id="btn" value="제출">
</form>
<div id="result"></div>
<script src="gugudan.js"></script>
</body>
</html>
js
var random1 = Math.ceil(Math.random()*9);
var random2 = Math.ceil(Math.random()*9);
var answer = random1 * random2;
var word1 = document.getElementById("word1");
word1.textContent = String(random1)+" * "+String(random2)+" = ?";
var form = document.getElementById("form");
form.addEventListener("submit",function(e){
e.preventDefault();
var inputText = document.getElementById("inputText");
var result = document.getElementById("result");
console.log(answer, inputText.value);
if(Number(inputText.value)===answer){
result.textContent = "정답입니다.";
random1 = Math.ceil(Math.random()*9);
random2 = Math.ceil(Math.random()*9);
answer = random1 * random2;
word1.textContent = String(random1)+" * "+String(random2)+" = ?";
inputText.value="";
inputText.focus();
}
else{
result.textContent="오답입니다.";
inputText.value="";
inputText.focus();
}
});
구구단 화면을 HTML로 만들었는데 엔터하면 잘 작동하는데 버튼을 누르면 작동이 안돼요,,
어디가 문제일까요..?ㅠㅠ
자스스톤 응용
1달 전
초보자라 질문할 점이 참 많습니다. html파일은 깃허브에 있는 최종버전을 그대로 쓰는 상황입니다. js 파일은 카드 구성은 일단 했으나 구현 부분에 있어서는 주석으로 달아놓기는 했습니다만 function Card() 함수의 if문 부분을 어떻게 수정해야 하는지를 모르겠습니다. 일단 이 결과를 실행해보니 이런 결과가 나옵니다. 어떻게 수정해야 하나요?
function Gcard(name, att, hp, cost) {
this.name = name;
this.att = att;
this.hp = hp;
this.cost = cost;
}
var 알파 = new Card('알파', 8, 35, 1);
var 베타 = new Card('베타', 900, 8570, 6);
var 감마 = new Card('감마', 5, 30, 1);
var 오메가 = new Card('오메가', 450, 7500, 5);
var 제타 = new Card('제타', 15, 70, 2);
var 델타 = new Card('델타', 740, 6850, 5);
var 시그마 = new Card('시그마', 6, 60, 1);
var 람다 = new Card('람다', 320, 3140, 5);
var 라디안 = new Card('라디안', 10, 170, 2);
var 루트 = new Card('루트', 11, 60, 2);
var 엡실론 = new Card('엡실론', 880, 9120, 6);
var 파이 = new Card('파이', 7, 40, 1);
var 로 = new Card('로', 6, 45, 1);
var 타우 = new Card('타우', 400, 3065, 5);
var 오미크론 = new Card('오미크론', 50, 180, 3);
var 카파 = new Card('카파', 40, 220, 3);
var 뮤 = new Card('뮤', 9, 85, 1);
var 뉴 = new Card('뉴', 100, 550, 3);
var 카이 = new Card('카이', 1500, 25620, 10);
var 프시 = new Card('프시', 1620, 21000, 10);
var 상대 = {
영웅: document.getElementById('rival-hero'),
덱: document.getElementById('rival-deck'),
필드: document.getElementById('rival-cards'),
코스트: document.getElementById('rival-cost'),
덱data: [],
영웅data: [],
필드data: [],
선택카드: null,
선택카드data: null,
};
var 나 = {
영웅: document.getElementById('my-hero'),
덱: document.getElementById('my-deck'),
필드: document.getElementById('my-cards'),
코스트: document.getElementById('my-cost'),
덱data: [],
영웅data: [],
필드data: [],
선택카드: null,
선택카드data: null,
};
상대.덱data.push(알파)
상대.덱data.push(시그마)
상대.덱data.push(뮤)
상대.덱data.push(뉴)
상대.덱data.push(로)
상대.덱data.push(파이)
상대.덱data.push(제타)
상대.덱data.push(오메가)
상대.덱data.push(엡실론)
상대.덱data.push(프시)
나.덱data.push(델타)
나.덱data.push(타우)
나.덱data.push(람다)
나.덱data.push(라디안)
나.덱data.push(감마)
나.덱data.push(오미크론)
나.덱data.push(카파)
나.덱data.push(루트)
나.덱data.push(베타)
나.덱data.push(카이)
var 턴버튼 = document.getElementById('turn-btn');
var 턴 = true; // true면 내턴, false면 니턴
function 덱에서필드로(데이터, 내턴) {
var 객체 = 내턴 ? 나 : 상대; // 조건 ? 참 : 거짓;
var 현재코스트 = Number(객체.코스트.textContent);
if (현재코스트 < 데이터.cost) {
return 'end';
}
var idx = 객체.덱data.indexOf(데이터);
객체.덱data.splice(idx, 1);
객체.필드data.push(데이터);
객체.덱.innerHTML = '';
필드다시그리기(객체);
덱다시그리기(객체);
데이터.field = true;
객체.코스트.textContent = 현재코스트 - 데이터.cost;
}
function 필드다시그리기(객체) {
객체.필드.innerHTML = '';
객체.필드data.forEach(function(data) {
카드돔연결(data, 객체.필드);
});
}
function 덱다시그리기(객체) {
객체.덱.innerHTML = '';
객체.덱data.forEach(function(data) {
카드돔연결(data, 객체.덱);
});
데이터.field = true;
객체.코스트.textContent = 현재코스트 - 데이터.cost;
}
function 영웅다시그리기(객체) {
객체.영웅.innerHTML = '';
카드돔연결(객체.영웅data, 객체.영웅, true);
}
function 화면다시그리기(내화면) {
var 객체 = 내화면 ? 나 : 상대; // 조건 ? 참 : 거짓;
필드다시그리기(객체);
덱다시그리기(객체);
영웅다시그리기(객체);
}
function 턴액션수행(카드, 데이터, 내턴) {
// 턴이 끝난 카드면 아무일도 일어나지 않음
var 아군 = 내턴 ? 나 : 상대;
var 적군 = 내턴 ? 상대 : 나;
if (카드.classList.contains('card-turnover')) {
return;
}
// 적군 카드면서 아군 카드가 선택되어 있고, 또 그게 턴이 끝난 카드가 아니면 공격
var 적군카드 = 내턴 ? !데이터.mine : 데이터.mine;
if (적군카드 && 아군.선택카드) {
데이터.hp = 데이터.hp - 아군.선택카드data.att;
if (데이터.hp <= 0) { // 카드가 죽었을 때
var 인덱스 = 적군.필드data.indexOf(데이터);
if (인덱스 > -1) { // 쫄병이 죽었을 때
적군.필드data.splice(인덱스, 1);
} else { // 영웅이 죽었을 때
alert('승리하셨습니다!');
초기세팅();
}
}
화면다시그리기(!내턴);
아군.선택카드.classList.remove('card-selected');
아군.선택카드.classList.add('card-turnover');
아군.선택카드 = null;
아군.선택카드data = null;
return;
} else if (적군카드) { // 상대 카드면
return;
}
if (데이터.field) { // 카드가 필드에 있으면
카드.parentNode.querySelectorAll('.card').forEach(function(card) {
card.classList.remove('card-selected');
});
카드.classList.add('card-selected');
아군.선택카드 = 카드;
아군.선택카드data = 데이터;
} else { // 덱이 있으면
if (덱에서필드로(데이터, 내턴) !== 'end') {
내턴 ? 내덱생성(1) : 상대덱생성(1);
}
}
}
function 카드돔연결(데이터, 돔, 영웅) {
var 카드 = document.querySelector('.card-hidden .card').cloneNode(true);
카드.querySelector('.card-cost').textContent = 데이터.cost;
카드.querySelector('.card-att').textContent = 데이터.att;
카드.querySelector('.card-hp').textContent = 데이터.hp;
if (영웅) {
카드.querySelector('.card-cost').style.display = 'none';
var 이름 = document.createElement('div');
이름.textContent = '영웅';
카드.appendChild(이름)
}
카드.addEventListener('click', function() {
if (턴) { // 내 턴이면
if (!데이터.mine || 데이터.field) { // 상대 카드거나 카드가 필드에 있으면
return;
}
if (덱에서필드로(데이터, true) !== 'end') {
내덱생성(1);
}
} else { // 상대 턴인데
if (데이터.mine || 데이터.field) { // 내 카드거나 카드가 필드에 있으면
return;
}
if (덱에서필드로(데이터, false) !== 'end') {
상대덱생성(1);
}
}
턴액션수행(카드, 데이터, 턴);
});
돔.appendChild(카드);
}
function 상대덱생성(개수) {
for (var i = 0; i < 개수; i++) {
상대.덱data.push(카드공장());
}
상대.덱.innerHTML = '';
상대.덱data.forEach(function(data) {
카드돔연결(data, 상대.덱);
});
덱다시그리기(상대);
}
function 내덱생성(개수) {
for (var i = 0; i < 개수; i++) {
나.덱data.push(카드공장(false, true));
}
나.덱.innerText = '';
나.덱data.forEach(function(data) {
카드돔연결(data, 나.덱);
});
덱다시그리기(나);
}
function 내영웅생성() {
나.영웅data = 카드공장(true, true);
카드돔연결(나.영웅data, 나.영웅, true);
}
function 상대영웅생성() {
상대.영웅data = 카드공장(true);
카드돔연결(상대.영웅data, 상대.영웅, true);
}
function Card(영웅, 내카드) {
if (영웅) {
this.att = Math.ceil(Math.random()) + 4;
this.hp = Math.ceil(Math.random()) + 9999; //영웅영역 - 값 1개만 출력되야 함(실행시 10개 나옴)-공격력 5 체력 10000의 고정값
this.hero = true;
this.field = true;
} else {
this.att = Math.ceil(Math.random() * 5);
this.hp = Math.ceil(Math.random() * 5); //카드영역- 각 팀당 미리 셋팅 된 10개의 고유 카드 중 5개 랜덤으로 뽑히게 해야함
this.cost = Math.floor((this.att + this.hp) / 2);
}
if (내카드) {
this.mine = true;
}
}
function 카드공장(영웅, 내카드) {
return new Card(영웅, 내카드);
}
function 초기세팅() {
상대덱생성(5);
내덱생성(5);
내영웅생성();
상대영웅생성();
화면다시그리기(true); // 상대화면
화면다시그리기(false); // 내화면
}
턴버튼.addEventListener('click', function() {
턴 = !턴;
var 객체 = 턴 ? 나 : 상대;
document.getElementById('rival').classList.toggle('turn');
document.getElementById('my').classList.toggle('turn');
필드다시그리기(객체);
영웅다시그리기(객체);
턴 = !턴; // 턴을 넘기는 코드
if (턴) {
나.코스트.textContent = 10;
} else {
상대.코스트.textContent = 10;
}
document.getElementById('rival').classList.toggle('turn');
document.getElementById('my').classList.toggle('turn');
});
초기세팅();
자스스톤 응용법 질문
1달 전
math 객체를 사용하셔서 난수값 연산으로 랜덤 능력치를 가진 5장의 카드가 덱에 생성되게 되어있는 것 같습니다만
카드
var 상대 = {
영웅: document.getElementById('rival-hero'),
덱: document.getElementById('rival-deck'),
필드: document.getElementById('rival-cards'),
코스트: document.getElementById('rival-cost'),
덱data: [알파, 베타, 감마, 오메가, 제타, 델타, 빔펠],
영웅data: [],
필드data: [],
선택카드: null,
선택카드data: null,
이런 식으로 기존 코드에 덱 data 배열에 따로 미리 만들어둔 카드 이름을 넣고
이런 식으로 미리 카드에 따른 능력치 값을 입력시켜놓았는데 이걸 화면상에 구현하는 법을 모르겠습니다.
function Card(name, att, hp, cost) {
this.name = name;
this.att = att;
this.hp = hp;
this.cost = cost;
}
var 알파 = new Card('알파', 8, 35, 1)
var 베타 = new Card('베타', 900, 8570, 6)
var 감마 = new Card('감마', 5, 30, 1)
var 오메가 = new Card('오메가', 450, 7500, 5)
var 제타 = new Card('제타', 15, 70, 2)
var 델타 = new Card('델타', 740, 6850, 5)
제가 찾은 버그가 있는데요.!
2달 전
깃허브 코드 돌려봤을 때 버그가 있어서 질문 올립니다.
겜이 끝나고 다시 초기세팅될 때 상대카드 누르면 NaN이라고 뜨는 버그가 있고요. (이건 해결했습니다)
덱에서 필드로 놓고 카드를 써서 턴오버상태가 됐을 때 만약 코스트가 남아 덱의 카드를 누르면 턴오버, selected 상태가 풀립니다.
필드의 상태를 고정시켜야 문제가 해결될 것 같은데.. 흠 화면다시그리기로 인해 버그를 해결 못하겠네요. 잠시 제가 생각해본 해결책은 현재 필드의 데이터상태를 다른 변수로 선언한 배열에다 저장하고 화면다시그릴때 저장된 배열의 상태를 적용해주는 형태로 하면 될 것 같은데..
조금만 힌트를 주실 수 있나요.?
join undefined..?
2달 전
안녕하세요 선생님! 질문이 있습니다
console.log로 arr, arr.join(""), answer 다 찍어봤는데 잘나오는데
비교문에서부터 실행이 안됩니다. ㅠ__ㅠ
영어로만했지 강의랑 똑같이 썻습니다.
전체코드도 남겨봅니다... 왜안되는걸까요?...
https://github.com/jellybrown/javaScript/blob/master/baseball.js
[로또] 쌤 배열 랜덤 while 반복문 관련 질문 드려요
2달 전
쌤 while 문을
while (후보군.length > 0) {
}
이렇게 ↑후보군.length > 0 으로 안하고
while (후보군.length){
}
후보군.lenght 로만 해도, 랜덤 반복문이 돌아가요.
> 0 이 없어도 조건문이 참이니 돌아가는거 같은데
이 경우, > 0 빼도 될까요?
어차피 배열 후보군은 0 보다 계속 클테니 상관 없는게 아닐까요?
p.s 쌤 2020 초보 자바스크립트 유튜브 라이브방송 잘보구 있어요 ㅠㅠ 아직 로또 수업밖에 진도 안나갔지만, 복습겸 따라하며 라방 볼께요ㅠ
슨생님 지뢰찾기에서 질문있어요!
2달 전
슨생님
지뢰찾기에서
옆칸.click()으로 재귀함수가 되잖아요
값을 많이 입력하면
콜스택이 되버려서 setTimeout 으로 바꿧더니
너무 느리게 클릭이 되버리는데
이런경우에는 어떻게 해결해야 할까요?
밑에코드부분이요 ~~
if (dataset[옆칸줄][옆칸칸] !== 코드표.연칸) {
옆칸.click();
}
![[리뉴얼] React로 NodeBird SNS 만들기](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973)
