jsでクイック言語チェンジ機能
jsでクイック言語チェンジ機能:
ページ上で要素の中身をクイックチェンジする方法です。
ポイント
1.配列を用意する
2.onchangeイベントでswitchを使用
3.switchの中でupdate関数を呼び出し
・外国語翻訳の機能をつけたい
・ECサイトで服の色を変えたい
など、ユーザーのアクション（選択したもの）によって、表示の仕方やデザインを変化させたいときに使えそうです！
同系列の情報がずらずらと並ぶのを避けられ、相手が欲しい情報だけでピンポイントで見せることができるでしょう。
情報量の多くなりがちなサイトで使えそうです。
ページ上で要素の中身をクイックチェンジする方法です。
ポイント
1.配列を用意する
2.onchangeイベントでswitchを使用
3.switchの中でupdate関数を呼び出し
no5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number guessing game</title>
</head>
<body>
<p>「今日は晴れです」を何語に翻訳しますか？</p>
<select>
<option value="blk">英語</option>
<option value="ylw">韓国語</option>
<option value="ppl">ロシア語</option>
</select>
<ul></ul>
<script>
// 変数の定義
var languages = [
'英語',
'韓国語',
'ロシア語'
]
var greetings = [
'It is sunny today',
'오늘의 날씨는 맑음입니다',
'Погода сегодня солнечная'
]
var select = document.querySelector('select');
var body = document.querySelector('body');
var list = document.querySelector('ul');
// select要素を選択したら発動
select.onchange = function() {
// 選択した要素のvalueを取得
var choice = select.value;
// 条件分岐
switch (choice) {
case 'blk':
update(0);
break;
case 'ylw':
update(1);
break;
case 'ppl':
update(2);
break;
}
}
// 文字列を変化させる関数
function update (num) {
// var nameitem = document.createElement('li')
list.textContent = languages[num] + '語に翻訳すると' + greetings[num];
// list.appendChild(nameitem);
}
</script>
</body>
</body>
</html>
こんなところで使えそう！
・外国語翻訳の機能をつけたい・ECサイトで服の色を変えたい
など、ユーザーのアクション（選択したもの）によって、表示の仕方やデザインを変化させたいときに使えそうです！
同系列の情報がずらずらと並ぶのを避けられ、相手が欲しい情報だけでピンポイントで見せることができるでしょう。
情報量の多くなりがちなサイトで使えそうです。
コメント
コメントを投稿