2016-10-09 7 views
0

別々のボタンクリックを処理するために別々の関数を書くのを避けることができるかどうか見ています。クリックされたボタンのText値を読み取ることができれば、 "showName"という1つの関数を使用して、それぞれのボタンのクリックを処理するswitch文を使用できます。ノックアウト - ボタンのテキスト値を取得する方法は?

これは可能ですか?

<body> 
    <button data-bind="click: showName">Show Name</button> 
    <button data-bind="click: showName">Show Lists</button> 
</body> 

以下にさまざまな方法を試しました。私は最初のボタンがクリックされた場合、値 "ショーネーム"を取得したいと思います。しかし、これらのどれも働いていません。一例として、stackoverflowのを使用して

function TutorialsViewModel(){ 
    this.showName = function(e){   
     console.log(e); 
     console.log(e.target); 
     console.log(e.target.value); 
    }; 
} 

ko.applyBindings(new TutorialsViewModel()); 
+0

あなたの '

+0

私はidタグも避けることができるのか見ていました。要素を可能な限り一般的なものにする。あなたの答えは、(データ、e)に私の関数のパラメータを拡張することです。 idを使用せずに動作しますが、あなたが示唆するように、一意のid属性を使用する方が良いです。こうすることで、JSコードの対応するinnerTextを変更することなく、後でボタンのテキストを変更できます。ありがとう。 – nanonerd

答えて

3

代わりにあなたがe.target.innerTextを使用する必要がe.target.valueを使用します。ここで

が動作デモです:http://jsfiddle.net/e8JPT/315/

HTML

<body> 
    <button id="btn1" data-bind="click: log">Show Name</button> 
    <button id="btn2" data-bind="click: log">Show Lists</button> 
</body> 

Javascriptを

var TutorialsViewModel=function(){ 
    this.log = function(data, event){   

     alert("You clicked on : " +event.target.innerText); 
    }; 
} 

ko.applyBindings(new TutorialsViewModel()); 

・ホープ、このことができます!

+0

ああ、ありがとう。私のjavascript関数は2つのパラメータ(データ、イベント)を必要としました。私は1つのパラメータ(e)を供給していました。私はそれを概念的に正しいものにしていたと確信していました。ちょうど構文にミスがありました。とても有難い ! – nanonerd

+0

私はe.target.innerHTMLもやってみたことを断った。いったん私はパラメータを固定し、これも同様に動作します。乾杯! – nanonerd

+0

この場合、この回答を受け入れることはできますか? –

0

、あなたがページから任意の要素を取得するための関数getElementsByNamegetElementsByClassNameまたはgetElementsByIdを使用して、それのすべてのプロパティにアクセスすることができます。任意のブラウザのコンソールからのStackOverflowからnamevalueinnerHTML、等...

例(F12が開きます):

var button = document.getElementById("submit-button"); 
//this only works if the button has id="submit-button" 
button.value; 
// output : "Text in button" 
関連する問題