<li>のvalue値をJavaScriptで取得・計算したい

リストのうちのいずれかをクリックしたときに、valueの値を変数へ代入したいのですが、コンソールを見ると「undefined」となってしまいます。

コードは以下です。

html
1<ul id="price">
2　<li class="even"><a class="btn" href="#02" name="price" value="300" onclick="price()">300円</a></li>
3　<li class="odd"><a class="btn" href="#02" name="price" value="600" onclick="price()">600円</a></li>
4　<li class="odd"><a class="btn" href="#02" name="price" value="1200" onclick="price()">1200円</a></li>
5</ul>
6

js
1function price() {
2    var out_price = $('price li a').val();
3    console.log(out_price)? //undefined
4};

以上で問題を特定できますでしょうか。

takasima20

2020/05/26 12:54

aタグにvalueは指定できんのかな?

kei344

2020/05/26 12:57

value属性は無いのでその書き方では取得できません。【<a>: アンカー要素 - HTML: HyperText Markup Language | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#Attributes

miyabi_pudding

2020/05/26 13:27

machamoさん、回答させていただきましたが、 HTMLの役割や仕様、JS構文の動く動かないなど、もう少し突っ込んで勉強された方がいいかと思います。

行動規範の内容に同意します

回答2件

ベストアンサー

onclickなんて使わないでjQueryでやればいいとは思いますが、とりあえず動くやつ。

HTML
1<ul id="price">
2　<li class="even"><a class="btn" href="#02" name="price" data-value="300" onclick="price(this)">300円</a></li>
3　<li class="odd"><a class="btn" href="#02" name="price" data-value="600" onclick="price(this)">600円</a></li>
4　<li class="odd"><a class="btn" href="#02" name="price" data-value="1200" onclick="price(this)">1200円</a></li>
5</ul>

js
1function price(elem) {
2    var out_price = $(elem).data('value');
3    console.log(out_price); //undefined
4    return false;
5};
6```**動くサンプル：**[https://jsfiddle.net/a0cLs69t/](https://jsfiddle.net/a0cLs69t/)

投稿2020/05/26 13:13

kei344

総合スコア69606

begginer_class

2020/05/26 13:28

こちらで望み通りの動きになりました。本当にありがとうございます。確かに、jqueryでやればもっと楽だったかもしれません。。

think49

2020/05/26 16:19

> <a class="btn" href="#02" name="price" ... HTML Standardには a[name] が存在しません。 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element 回答のHTMLタグを使うには、DOCTYPE宣言で HTML 4.01を名乗る必要があります。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.html#h-12.2

think49

2020/05/26 16:22

…と思いましたが、data-*属性があるので、HTML 4.01を名乗れないですね。

kei344

2020/05/26 16:39

To: think49さん元のコードを最小手で動かそうとしたコードなので、そもそもの問題については触れていません。（value属性については「質問への追記・修正」で指摘しているので省略しました、name属性については「取得・計算したい」属性値と関係が無かったため見ていません）

begginer_class

2020/05/27 08:36

name属性は、回答いただくまで「取得計算に必要なもの」と思い込んで元々書いていたものでしたので、削除しました。

行動規範の内容に同意します

質問の構文では、out_priceで、特定の要素を取得できていないため、
（price liでは、liの集まりというか、ID指定のセレクタになってないため、そもそも要素を取得できていない）
valメソッドを持っていないからです。
また、だいたいにおいて、a要素は、value属性を持たないので、動きません。

下記ならば、取得できるかと。

html
1<!-- メソッド実行の引数としてthisを入れる -->
2<ul id="price">
3  　<li class="even"><label onclick="price(this)"><input type="hidden" class="btn" name="price" value="300">300円</label></li>
4  　<li class="odd"><label onclick="price(this)"><input type="hidden" class="btn" name="price" value="600">600円</label></li>
5  　<li class="odd"><label onclick="price(this)"><input type="hidden" class="btn" name="price" value="1200">1200円</label></li>
6</ul>

javascript
1// 引数から要素を取得すれば、取得できる。
2function price(inputDom) {
3    var out_price = $(inputDom).children('input').val();
4    console.log(out_price); // "?"が文末は文法違反";"が正しい undefined
5}