Q&A
ソースの記述はマークダウンしてください
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: skyblue;
cursor:pointer;
}
#change{
font-size:20px;
}
.btn1{
display:flex;
}
.btn{
width:100px;
font-size:17px;
margin:0px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="box" id="target">
<script type="text/javascript">
//クリックされたとき
let click = 1;
document.getElementById('target').addEventListener('click',function(){
//背景色をピンク、緑、黄色の形を円形
var elem = document.getElementById('target');
if(click == 1){
elem.style.background='pink';
elem.style.borderRadius='50%';
click++;
}else if(click == 2){
elem.style.background='green';
elem.style.borderRadius='50%';
click++;
}else if(click == 3){
elem.style.background='yellow';
elem.style.borderRadius='50%';
}
});
document.getElementById('target');
//マウスが要素上に入ったとき
target.addEventListener('mouseover',() => {
target.style.background='yellow';
},false);
//マウスが要素上から離れたとき
target.addEventListener('mouseleave',() => {
target.style.background='skyblue';
},false);
function chgColor()
{
if("change")
{
document.getElementById("change").style.color = "blue";
}
}
function chgColor()
{
if("change")
{
document.getElementById("change").style.color = "red";
}
}
</script>
</div>
<p id="change">Example text</p>
<div>
<div class="btn1">
<input type="button" value="red" onclick="chgColor()">
<input type="button" value="blue" onclick="chgColor()">
</div>
</div>
</body>
</html>
文字の色を変えたいです。赤のボタンをクリックすると赤に、青のボタンを押すと青に。
今書いている分はこんな感じです。違うものも書いているのでそこは気にせずお願いします。
よろしくお願いします。
回答2件
0
ベストアンサー
文字の色を変えたいだけなら他の部分は割愛したほうがよいでしょう
javascript
1<script> 2function chgColor(v) { 3 change.style.color = v; 4} 5</script> 6<p id="change">Example text</p> 7<div class="btn1"> 8<input type="button" value="red" onclick="chgColor(this.value)"> 9<input type="button" value="blue" onclick="chgColor(this.value)"> 10</div>
投稿2022/06/06 01:13
総合スコア114843
0
分けてもらえます？
html
1htmlはここで
css
1cssはここ
js
1jsはここ
下記の方法で上みたいに入力できます。`はバッククオォートと呼ばれるもので、macなら
shift 押しながら@マークを押すと入力できます。
あと、関係ない部分はできるだけ省くために、新しいプロジェクトを作成して、該当コードの部分だけ再現したものを作成できると答えてくれる方が増えますよ!!
```:html
```
投稿2022/06/05 09:30
総合スコア191
```:html
<p id="change">Example text</p>
<div>
<div class="btn1">
<input type="button" value="red" onclick="chgColor()">
<input type="button" value="blue" onclick="chgColor()">
</div>
</div>
```:css
.btn1{
display:flex;
}
```:js
<script>
function chgColor()
{
if("change")
{
document.getElementById("change").style.color = "blue";
}
}
function chgColor()
{
if("change")
{
document.getElementById("change").style.color = "red";
}
}
</script>
こんな感じでしょうか？
あなたの回答
tips
プレビュー
