常連

注目の的

社会貢献

質問力

###前提・実現したいこと
初心者です。HTMLで画像の上に文字を真ん中によせたいです。
HTMLとなんでもいいのですができればCSSでやりたいです。
よろしくおねが
###発生している問題・エラーメッセージ

```
エラーメッセージ
```

###該当のソースコード
```ここに言語を入力
ここにご自身が実行したソースコードを書いてください
```

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

画像の上にの中央寄せ

Document Object Model の略で
Webページの要素にアクセスする仕組み（構造）のことです。

・HTML要素（P,ULなど）にJS（他の言語の場合も有る）からアクセスする為の仕組みの事。

・JSとHTMLの架け橋、インターフェースの役割をはたす、仕組み。HTMLのAPI

と調べてわかったのですが、どうもいまいちピント来ません。
初心者にもわかるように、具体的に教えていただければ幸いです。

また仕組みという単語はITでは非常によく出てきますが、ITで言う仕組みはわかりやすく言うとどういうことなのでしょうか？

辞書
物事の組み立て。構造。機構。「複雑な仕組の機械」「政治の仕組」2 事をうまく運ぶために工夫された計画。くわだて。

Document Object Modelについて。

###前提・実現したいこと
フォームがあって、そのフォームに入れた数値の30%の値を計算し、違うフォームに反映させたいのですが、どのようなコードになりますか？
初心者ですがよろしくお願いします。

javascript 計算

###前提・実現したいこと
jQueryで複数（20個）の個別のチェックボックスの値を取得して、別の個別要素（個別のチェックボックスに対応したアイコン≠label）の状態を変えたい。



###発生している問題・エラーメッセージ
上記を実現するために下記の`if`で回していく方法を思いついたのですが、これだと`if`を20回繰り返す無駄に長いコードになってしまいます。

###該当のソースコード

```HTML
<main>
  <input type="checkbox" value="チェックボックス1" id="check1"/>
  <label for="check1"> チェックボックス1
  </label>
  <input type="checkbox" value="チェックボックス2" id="check2"/>
  <label for="check2">チェックボックス2</label>
  <input type="checkbox" value="チェックボックス3" id="check3"/>
  <label for="check3">チェックボックス3</label>
  ...
</main>
<aside>
  <ul>
    <li><span class="icon" id="icon1">アイコン</span></li>
    <li><span class="icon" id="icon2">アイコン</span></li>
    <li><span class="icon" id="icon3">アイコン</span></li>
    ...
  </ul>
</aside>
```

```javascript
$(function(){
$('input[type="checkbox"]').change(function(){
     if $("input[id='check1']:checked") {
          $("#icon1").addClass('selected');
      } 
    if $("input[id='check2']:checked") {
          $("#icon2").addClass('selected');
      } 
... 
  });
});
```

###試したこと
他には（カスタム）data属性を使用する方法（classに `plan-checker` がついている要素は中身が変更されるたびに `function` を実行して値をチェックして空かどうかを調べ自身の属性 `data-plan-flag="hoge"` の中身の `hoge` を使ってアイコンの `data-plan-chack="hoge"` と付き合わせて同じ値の入っているものをselectedにする。）などもあること思いますが、これも処理が重くなってしまいそうな気が…

初歩的な質問で申し訳ございませんが何かいいアイデアがございましたらアドバイスを頂きたく存じます。
よろしくお願いいたします。

jQueryで多数のチェックボックスの値を取得して、別要素の状態を変えたい。

htmlのチェックボックスを利用して
チェックボックスをチェックすると
指定した場所にチェックした内容とチェックした値同士を計算した内容を表示させたいと思っております。

いろいろ調べたり自分でソースを書いてはみたのですが
うまくいかず、こちらで質問させて頂きました。

【詳細】
チェックボックスには複数の数字を配列のような形で値を保持させ、5個以上はチェックできないようにし、
チェックしたもの同士を対応する数字で足し算をし、
結果をテーブルなどで表示をさせたいです。

チェックボックスは
<label for="natuyouboushi"><input type="checkbox" name="xxx" id="natuyouboushi" value="0,9,4,5,5,7,1">夏用帽子</label>

<label for="fuyuyouboushi"><input type="checkbox" name="xxx" id="fuyuyouboushi" value="0,1,0,9,5,3,5">冬用帽子</label>
のようなイメージです。
valueの数字の意味は
オシャレ度やあったかさなど
そのアイテムを表す数字になっており、
帽子、インナー、ズボン、アウター といった具合に
アイテムごとに分かれております。
チェックされたアイテムごとのvalueの値を計算し、
各アイテムを1～5まで選択した内容の各項目の合計値をだしたいです。

チェックされたものを表示するjpueryはこちらを参考にさせて頂いております。
$(document).ready(function() {

    
    function updateData() {
        var arr = [];
        $(":checked").each(function(o) {
            arr.push($(this).val());
        });
        // １つ以上チェックされている時は、    show の内容を更新する。
        if (arr.length > 0) {
            $("#show").text(arr.join(", ") + " を選択しましたね！！");
        }
    }
    $("input[type=checkbox]").click(function(e) {
        updateData();
    });
    
    updateData();
});

jqueryでもPHPでもどちらでの良いのですが、
チェックボックスに複数の値を持たせ、計算させる方法をご存知の方よろしくお願いいたします。

チェックボックスのチェックした内容を計算するフォーム

配列に格納されている値をすべて足したいのですが
毎回for文で記述しているのが面倒です。
関数化すればいいのですが、他になにかよい方法
はありませんか？
自分が行っているのは下記の例のような形です。
`
var sampleList= [0,1,2,3];
function sum(val) {
var result = 0;
for (var i = 0, j = val.length; i < j; i++) {
result += val[i];
}
return result;
}
sum(sampleList);
`

配列の値をすべて加算したい

jqueryで使われる$(".A",$(".B"))というセレクタをjavascriptでだけで表すにはどうすればいいですか？

もう少し詳しくすると
```
<div class="A">
 <button class="B" type="button"></div>
 <button class="C" type="button"></div>
 <button class="D" type="button"></div>
</div>
```
というスクリプトがあった場合、classBのボタンをクリックするには
jqueryを使えば```$(".A",$(".B")).click()```で
クリックすることができますが

javascriptだけを使った場合ではどのようにすれば実行できますか？

jqueryとjavascrip

htmlで新潟県のオープンデータの人口などを使いたいと思ったのですが、htmlのなかになんと記述すればいいのか全くわからず...どのようにしたらいいのか教えていただきたいです。

使いたい新潟の人口オープンデータ先
http://www.city.niigata.lg.jp/shisei/seisaku/it/open-data/opendata-toukei/od-jinkou/od-suikeijinkou.html

htmlでオープンデータを使用したい

以下のソースを利用してホームページにテキストボックスに入力した値を取得し、表示させる機能を複数付けたいのですが、うまく実装できません。 

同一ページ内に複数実装するやり方についてアドバイスをお願いします。  
よろしくお願いします。 


```HTML
 <html> 
 <head> 
 <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 
 <META http-equiv="Content-Style-Type" content="text/css"> 
     <title></title> 

  <script type="text/javascript" language="javascript"> 
         function onButtonClick() { 
           target = document.getElementById("output"); 
           target.innerText = document.forms.form1.textBox1.value; 
         } 
   </script> 
 </head> 
 <body> 
   <form name="form1" action=""> 
     <input name="textBox1" type="text" value="" /> 
     <input type="button" value="OK!" onclick="onButtonClick();" /> 
   </form> 
   <hr /> 
   <div id="output"></div> 
 </body> 
 </html>
```


以下の様にしましたが、上手くいきませんでした。

```HTML
 <html> 
 <head> 
 <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 
 <META http-equiv="Content-Style-Type" content="text/css"> 
     <title></title> 

  <script type="text/javascript" language="javascript"> 
         function onButtonClick() { 
           target = document.getElementById("output1"); 
           target.innerText = document.forms.form1.textBox1.value; 
         } 
   </script> 
  <script type="text/javascript" language="javascript"> 
         function onButtonClick() { 
           target = document.getElementById("output2"); 
           target.innerText = document.forms.form2.textBox2.value; 
         } 
   </script> 
 </head> 
 <body> 
   <form name="form1" action=""> 
     <input name="textBox1" type="text" value="" /> 
     <input type="button" value="OK!" onclick="onButtonClick();" /> 
   </form> 
      <form name="form2" action=""> 
     <input name="textBox2" type="text" value="" /> 
     <input type="button" value="OK!" onclick="onButtonClick();" /> 
   </form> 
   <hr /> 
   <div id="output1"></div> 
   <div id="output2"></div>
 </body> 
 </html>
```

テキストボックスの値を取得し表示させる

test.html
```html
<html>
  <body>
    <h1>a</h1>
    <script src="./test.js"></script>
  </body>
</html>
```
test.js
```javascript
var form = document.createElement('form');
form.id = 'Form';

var out = document.createElement('output');
out.name = 'op';
form.appendChild(out);
var element = document.getElementsByTagName('h1')[0];
element.appendChild(form);

var el = document.getElementById('Form');
var text = document.createElement('input');
text.type = 'text';
text.name = 'a'
el.appendChild(text);

var btn = document.createElement('button');
btn.type = 'button';
btn.onclick= "op.value = a.value" //ここが上手くいかない
var submit = document.createTextNode("submit");
btn.appendChild(submit);
el.appendChild(btn)

```
onclickを追加する場合、test.jsの下から４行目のようにかけるかと思ったのですがうまくできませんでした
JavaScriptで追加したbuttonにさらにonClick処理を追加するにはどうしたらよいのでしょうか？

また、タイトルには記していないことなのですが、button要素のtextContentを追加するとき、上記のtest.jsのように書くべきか、それとも次のように書くべきか、どちらがただしいのでしょうか


```javascript
//test.jsの下から６行分を書き換えました
var btn = document.createElement('button');
btn.type = 'button';
btn.onclick= "op.value = a.value" //ここが上手くいかない
btn.textContent = 'submit'
el.appendChild(btn)
```

ご教示お願いします