質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

942閲覧

spliceを使って特定の値を取得する方法について

Yuki2

総合スコア52

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/21 10:43

編集2021/05/21 10:46

一つの配列から取り出した要素を二つの配列に分配したい。

配列から特定の要素をstartからendの条件関係なく、取得するメソッドがなさそうで困っている。

js

1 let scoreA = array.splice(array[0],array[1],array[3],array[4],array[7]); 2 let scoreB = array.splice(array[2],array[5],array[6],array[8],array[9]);

spliceが正常に機能していない。

js

1script.js:26 (3) [7, 7, 7] 2script.js:27 (3) [7, 7, 7]0: 71: 72: 7length: 3__proto__: Array(0)

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>test</title> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11 12<body> 13 <header> 14 <div class="header"> 15 <h1 class="header__title">パーソナリティ診断</h1> 16 </div> 17 </header> 18 <div class="content"> 19 <form action=""> 20 <div class="content__card"> 21 <span class="content__text">Q1: 懸命に努力をすれば、たいてい望むものを達成できる。</span> 22 <div class="content__flex"> 23 <div class="content__bg-text">同意する</div> 24 <div class="content__input-wrapper" id="inputWrap"> 25 <input type="radio" name="element1" value="7"> 26 <input type="radio" name="element1" value="6"> 27 <input type="radio" name="element1" value="5"> 28 <input type="radio" name="element1" value="4"> 29 <input type="radio" name="element1" value="3"> 30 <input type="radio" name="element1" value="2"> 31 <input type="radio" name="element1" value="1"> 32 </div> 33 <div class="content__bg-text">同意しない</div> 34 </div> 35 </div> 36 <div class="content__card"> 37 <span class="content__text">Q2: 計画を立てたら、その通りに実行できると確信している。</span> 38 <div class="content__flex"> 39 <div class="content__bg-text">同意する</div> 40 <div class="content__input-wrapper"> 41 <input type="radio" name="element2" value="7"> 42 <input type="radio" name="element2" value="6"> 43 <input type="radio" name="element2" value="5"> 44 <input type="radio" name="element2" value="4"> 45 <input type="radio" name="element2" value="3"> 46 <input type="radio" name="element2" value="2"> 47 <input type="radio" name="element2" value="1"> 48 </div> 49 <div class="content__bg-text">同意しない</div> 50 </div> 51 </div> 52 <div class="content__card"> 53 <span class="content__text">Q3: 純粋な技能を必要とするゲームよりも、ある程度運が関与するゲームの方を好む。</span> 54 <div class="content__flex"> 55 <div class="content__bg-text">同意する</div> 56 <div class="content__input-wrapper"> 57 <input type="radio" name="element3" value="7"> 58 <input type="radio" name="element3" value="6"> 59 <input type="radio" name="element3" value="5"> 60 <input type="radio" name="element3" value="4"> 61 <input type="radio" name="element3" value="3"> 62 <input type="radio" name="element3" value="2"> 63 <input type="radio" name="element3" value="1"> 64 </div> 65 <div class="content__bg-text">同意しない</div> 66 </div> 67 </div> 68 //文字数制限のため割愛 Q4-Q10// 69 <button type="submit">送信</button> 70 </form> 71 </div> 72 <script src="script.js"></script> 73</body> 74 75</html>

js

1const radio = document.querySelectorAll('input'); 2const btn = document.querySelector('button'); 3const array = []; 4 5radio.forEach(element => { 6 element.addEventListener('click', () => { 7 const n = element.name.replace('element', '') - 1; 8 if (element.checked) { 9 array[n] = Number(element.value); 10 } 11 // totalArray = array.reduce(function (a, x) { 12 // return a + x; 13 // }) 14 }); 15}); 16 17btn.addEventListener('click', (event) => { 18 event.preventDefault(); 19 if (array.length !== 10) { 20 alert('error'); 21 } else { 22 alert('ok'); 23 let scoreA = array.splice(array[0],array[1],array[3],array[4],array[7]); 24 let scoreB = array.splice(array[2],array[5],array[6],array[8],array[9]); 25 26 console.log(scoreA); 27 console.log(scoreB); 28 // array.reduce(function (sum, element) { 29 // return sum + element; 30 // }) 31 // console.log(array); 32 } 33});

試したこと

Array.prototype.slice()
について調べてみた。
規則的な要素のみならず、不確定な順番の要素も取得できないspliceにメソッドとしての不備を感じてしまう。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

何をしたいか想像が付きませんが

javascript

1let scoreA = [array[0],array[1],array[3],array[4],array[7]]; 2let scoreB = [array[2],array[5],array[6],array[8],array[9]];

でいいのでは?
キーからデータを抜き出すならfilterでも

javascript

1let scoreA = array.filter((_,x)=>[0,1,3,4,7].includes(x)); 2let scoreB = array.filter((_,x)=>[2,5,6,8,9].includes(x));

投稿2021/05/21 11:03

yambejp

総合スコア114983

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

sliceを参考にspliceを使って、何をしたいのかがわかりません。

js

1// こういうことをしたいのでしょうか。 2let scoreA = [array[0],array[1],array[3],array[4],array[7]];

【Array.prototype.slice() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

【Array.prototype.splice() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

投稿2021/05/21 10:51

kei344

総合スコア69458

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問