詳しい人求む！

html javascript 作った配列をボタンをクリックしたときに表示させる方法

締切済

質問者：わちょん
質問日時：2021/10/25 15:51
回答数：2件

htmlで
<label> フルーツの名前は <fruit> </label>
<input type="button" value="進む" onclick="go(1)">　//ボタン

<script>
const fruit = [
"りんご",
"ばなな",
"ぶどう",
]; //フルーツの配列
let num = 0;

function go(e) {
fruit [num + 1];
</script>

これだとhtmlのラベルに入ってる<fruit>が反応しないのですがどこが間違ってますか？？
ボタンをクリックしたときに名前が変わるようにしたいです

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： babu_babu_baboo
回答日時：2021/10/25 19:46

発想を変えて、HTMLの中に埋め込む。

（全角空白は半角に置換のこと。）

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Test</title>

<style>
.tg span:nth-of-type(n+2) { display: none; }
</style>

<body>
<p class="tg">
　フルーツの名前は
　<span>りんご</span>
　<span>ばなな</span>
　<span>ぶどう</span>
</p>

<p class="tg">
　野菜の名前は
　<span>メロン</span>
　<span>スイカ</span>
　<span>イチゴ</span>
</p>

<script>

function handler ({target: e}, tg, span) {
　if (tg = e.closest ('.tg'))
　　if (span = tg.querySelector ('span'))
　　　tg.appendChild (span);
}

document.addEventListener ('click', handler, false);

</script>

- 2
- 件

通報する

No.1

回答者： fujillin
回答日時：2021/10/25 16:53

こんにちは

何をしたいのかよくわからないけれど・・・

ひょっとして、こんなことなのでしょうか？
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
const fruit = ["りんご","ばなな","ぶどう"];
let num = 0;
function go() {
document.getElementById('fruit').textContent = fruit[num++ % fruit.length];
}
</script>
</head>
<body>
<label> フルーツの名前は <span id="fruit"></span></label>
<input type="button" value="進む" onclick="go()" />
</body>
</html>