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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

受付中

JavaScriptで作った簡単なvoting systemを動かせたい。

titivo
titivo

総合スコア2

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0回答

1グッド

0クリップ

184閲覧

投稿2022/12/04 10:13

編集2022/12/04 14:39

javascriptで簡単な投票システムをつくったのですが、それぞれクリックし、カウントおよび%を動かしたいのですがこれからどのようにすれば良いのでしょうか?

今のままでは普通のグラフ状態です;

実現したいこと

ここに実現したいことを箇条書きで書いてください。
カウントと累積表示機能を動作するようにする

発生している問題・エラーメッセージ

エラーは出てませんが、おそらくサーバー関係の知識が足りないところがあるのではと... node.jsを組み込んで

該当のソースコード

index.html

1<!DOCTYPE html> 2<!-- Created By MultiWebPress - www.multiwebpress.com --> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Poll UI Design | MultiWebPress</title> 8 <link rel="stylesheet" href="css/style.css"> 9</head> 10<body> 11 <div class="wrapper"> 12 <header>What Design tool do you use the most? <br></header> 13 <div class="poll-area"> 14 <input type="checkbox" name="poll" id="opt-1"> 15 <input type="checkbox" name="poll" id="opt-2"> 16 <input type="checkbox" name="poll" id="opt-3"> 17 <input type="checkbox" name="poll" id="opt-4"> 18 <label for="opt-1" class="opt-1"> 19 <div class="row"> 20 <div class="column"> 21 <span class="circle"></span> 22 <span class="text">Photoshop</span> 23 </div> 24 <span class="percent">55%</span> 25 </div> 26 <div class="progress" id="pstyle1" style='--w:55;'></div> 27 </label> 28 <label for="opt-2" class="opt-2"> 29 <div class="row"> 30 <div class="column"> 31 <span class="circle"></span> 32 <span class="text">Sketch</span> 33 </div> 34 <span class="percent">20%</span> 35 </div> 36 <div class="progress" id="pstyle2" style='--w:80;'></div> 37 </label> 38 <label for="opt-3" class="opt-3"> 39 <div class="row"> 40 <div class="column"> 41 <span class="circle"></span> 42 <span class="text">Adobe XD</span> 43 </div> 44 <span class="percent">20%</span> 45 </div> 46 <div class="progress" id="pstyle3" style='--w:20;'></div> 47 </label> 48 <label for="opt-4" class="opt-4"> 49 <div class="row"> 50 <div class="column"> 51 <span class="circle"></span> 52 <span class="text">Figma</span> 53 </div> 54 <span class="percent">96%</span> 55 </div> 56 <div class="progress" id="pstyle4" style='--w:96;'></div> 57 </label> 58 </div> 59 </div> 60 <script src="javascript/script.js"></script> 61</body> 62</html> 63

style.css

1@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); 2*{ 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6 font-family: 'Poppins', sans-serif; 7} 8body{ 9 display: flex; 10 align-items: center; 11 justify-content: center; 12 min-height: 100vh; 13 background: FAFAFA; 14} 15.wrapper{ 16 padding: 30px; 17 background: #fff; 18 max-width: 500px; 19 width: 100%; 20 box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1); 21} 22 23@media (max-width:675px){ 24 .wrapper{ 25 max-width: 300px; 26} 27} 28 29.wrapper header{ 30 font-size: 22px; 31 font-weight: 600; 32} 33.wrapper .poll-area{ 34 margin: 20px 0 15px 0; 35} 36.poll-area label{ 37 display: block; 38 margin-bottom: 10px; 39 padding: 8px 15px; 40 border: 2px solid #e6e6e6; 41 transition: all 0.2s ease; 42} 43 44label.opt-1.selected { 45 border: 2px solid #cf2d00; 46} 47 48label.opt-2.selected { 49 border: 2px solid #4bcc00; 50} 51 52label.opt-3.selected { 53 border: 2px solid #cfbd00; 54} 55 56label.opt-4.selected { 57 border: 2px solid #01638c; 58} 59 60div#pstyle1::after { 61 background: #cf2d00 !important; 62} 63 64div#pstyle2::after { 65 background: #4bcc00 !important; 66} 67 68div#pstyle3::after { 69 background: #cfbd00 !important; 70} 71 72div#pstyle4::after { 73 background: #01638c !important; 74} 75 76label.opt-1.selected .row .circle{ 77 border-color: #cf2d00 !important; 78 } 79 80 label.opt-2.selected .row .circle{ 81 border-color: #4bcc00 !important; 82 } 83 84 label.opt-3.selected .row .circle{ 85 border-color: #cfbd00 !important; 86 } 87 88 label.opt-4.selected .row .circle{ 89 border-color: #01638c !important; 90 } 91 92 93label.opt-1 .row .circle::after{ 94 background: #cf2d00 !important; 95 } 96 97 label.opt-2 .row .circle::after{ 98 background: #4bcc00 !important; 99} 100 101 label.opt-3 .row .circle::after{ 102 background: #cfbd00 !important; 103 } 104 105 label.opt-4 .row .circle::after{ 106 background: #01638c !important; 107 } 108 109label .row{ 110 display: flex; 111 pointer-events: none; 112 justify-content: space-between; 113} 114label .row .column{ 115 display: flex; 116 align-items: center; 117} 118label .row .circle{ 119 height: 19px; 120 width: 19px; 121 display: block; 122 border: 2px solid #ccc; 123 border-radius: 50%; 124 margin-right: 10px; 125 position: relative; 126} 127label .row .circle::after{ 128 content: ""; 129 height: 11px; 130 width: 11px; 131 border-radius: inherit; 132 position: absolute; 133 left: 2px; 134 top: 2px; 135 display: none; 136} 137.poll-area label:hover .row .circle::after{ 138 display: block; 139 background: #e6e6e6; 140} 141label.selected .row .circle::after{ 142 display: block; 143} 144label .row span{ 145 font-size: 16px; 146 font-weight: 500; 147} 148label .row .percent{ 149 display: none; 150} 151label .progress{ 152 height: 7px; 153 width: 100%; 154 position: relative; 155 background: #f0f0f0; 156 margin: 8px 0 3px 0; 157 border-radius: 30px; 158 display: none; 159 pointer-events: none; 160} 161label .progress:after{ 162 position: absolute; 163 content: ""; 164 height: 100%; 165 background: #ccc; 166 width: calc(1% * var(--w)); 167 border-radius: inherit; 168 transition: all 0.2s ease; 169} 170label.selectall .progress, 171label.selectall .row .percent{ 172 display: block; 173} 174input[type="radio"], 175input[type="checkbox"]{ 176 display: none; 177}

script.js

1const options = document.querySelectorAll("label"); 2for (let i = 0; i < options.length; i++) { 3 options[i].addEventListener("click", ()=>{ 4 for (let j = 0; j < options.length; j++) { 5 if(options[j].classList.contains("selected")){ 6 options[j].classList.remove("selected"); 7 } 8 } 9 10 options[i].classList.add("selected"); 11 for (let k = 0; k < options.length; k++) { 12 options[k].classList.add("selectall"); 13 } 14 15 let forVal = options[i].getAttribute("for"); 16 let selectInput = document.querySelector("#"+forVal); 17 let getAtt = selectInput.getAttribute("type"); 18 if(getAtt == "checkbox"){ 19 selectInput.setAttribute("type", "radio"); 20 }else if(selectInput.checked == true){ 21 options[i].classList.remove("selected"); 22 selectInput.setAttribute("type", "checkbox"); 23 } 24 25 let array = []; 26 for (let l = 0; l < options.length; l++) { 27 if(options[l].classList.contains("selected")){ 28 array.push(l); 29 } 30 } 31 if(array.length == 0){ 32 for (let m = 0; m < options.length; m++) { 33 options[m].removeAttribute("class"); 34 } 35 } 36 }); 37}

試したこと

codeの見直し。
サーバーとの接続?

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

nodeを組み込んでバックエンドの構築を試みてる途中途中です。

titivo👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/12/05 00:09

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

yambejp

2022/12/05 00:24

質問は環境構築方法でしょうか?それとも環境は構築されている前提でソースの書き方でしょうか? サーバーサイドがnodeということですがCMSは導入していますか?

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。