学習サイトを見よう見まねで、JavaScriptでおみくじを作りました。ボタンをもう１つ増やして、

解決済

質問者：マーーー。
質問日時：2018/02/19 16:03
回答数：2件

学習サイトを見よう見まねで、JavaScriptでおみくじを作りました。
ボタンをもう１つ増やして、おみくじとは別でクリックさせたいです。
style.cssに２つ目のボタンの要素？や、もう１つmain1.jsを作ってみたのですが、２つ目のボタンが出てきてくれません、、
元の、おみくじはできているのですが、これにどう足せば２つ目のボタンができますか？

-------index.html----------------------------------------

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>おみくじ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="btn">？</div>
<script src="js/main.js"></script>
</body>

</html>

-----stylse.css------------------------------------------------

@charset "utf-8";
body{
background: #efefef;/*背景（灰）*/
}

#btn{
margin: 30px auto 0;
width: 400px;
height: 400px;
border-radius: 50%;
background: #00BFFF;/*ボタンの色（青）*/
text-align: center;
line-height: 400px;
color: #fff;/*中の文字（白）*/
font-size: 42px;
font-weight: bold;
cursor: pointer;
opacity:0.9;
box-shadow:0 20px 0 #007FFF;
border: 3px solid #007FFF;
user-select: none;
}

#btn:hover{
opacity:1;
}

#btn.pushed{
margin-top:42px;
box-shadow:0 8px 0 #007FFF;
}

}

-----main.js---------------------------------------------------

(function(){
'use strict';

var btn = document.getElementById('btn');

btn.addEventListener('click',function(){

var results=['大吉','小吉','中吉'];
var n=Math.floor(Math.random()*results.length);
this.textContent=results[n];
});
btn.addEventListener('mousedown',function(){
this.className='pushed';
});
btn.addEventListener('mouseup',function(){
this.className='';
});

})();

単にボタンを２つではなく、それぞれ別の動きをするボタンを作りたいです。
ボタン1をおしたら、ボタン1が
ボタン2をおしたら、ボタン2が動くようにしたいです

補足日時：2018/02/20 16:59
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2018/02/20 17:43

> ボタン1をおしたら、ボタン1が

> ボタン2をおしたら、ボタン2が動くようにしたいです

btnをクラスにしたら

var btns = document.querySelectorAll('.btn');
btns[0].addEventListener(・・・);
btns[1].addEventListener(・・・);

とすればいいでしょう。