нокаут - как получить текстовое значение кнопки?

#javascript #button #text #knockout.js

#javascript #кнопка #текст #knockout.js

Вопрос:

Я смотрю, могу ли я избежать написания отдельных функций для обработки отдельных нажатий кнопок. Если я могу прочитать текстовое значение кнопки, на которую нажали, то я могу использовать одну функцию с именем «showName» и использовать оператор switch для обработки каждого соответствующего нажатия кнопки.

Возможно ли это?

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

Я пробовал различные методы ниже. Я хочу получить значение «Показать имя» при нажатии первой кнопки. Но ни один из них не работает.

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

ko.applyBindings(new TutorialsViewModel());

1. Вы пробовали устанавливать id атрибуты для своих <button> тегов?

2. Я смотрел, могу ли я также избежать тегов id. Чтобы сделать элементы как можно более универсальными. Согласно вашему ответу ниже, исправление заключается в расширении параметров моей функции до (data, e) . Хотя он работает без использования id, как вы предлагаете, лучше использовать уникальные атрибуты id. Таким образом, я могу изменить текст кнопки позже без необходимости изменять соответствующий внутренний текст в коде JS. Спасибо.

Ответ №1:

Вместо использования e.target.value вам нужно использовать e.target.innerText .

Вот рабочая демонстрация: 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());

Надеюсь, это поможет!

1. Аааа, спасибо. Моей функции javascript требовалось 2 параметра (данные, событие). Я предоставлял только 1 параметр (e). Я был уверен, что делаю это правильно концептуально. Просто не хватало синтаксиса. Очень признателен!

2. Я не упомянул, что я также пробовал e.target.innerHTML. Как только я исправил параметры, это тоже работает. Приветствия !

Ответ №2:

Используя stackoverflow в качестве примера, вы можете использовать функцию getElementsByName getElementsByClassName или getElementsById для извлечения любого элемента со страницы и иметь доступ ко всем его свойствам. name , value , innerHTML , и т.д…

Пример из StackOverflow из консоли любого браузера (F12 для открытия):

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