Javascript, как добавить несколько кнопок и связать одну и ту же функцию Onclick с различным значением

Question

У меня есть простой вопрос, но не знаю, как это сделать. Я хочу добавить несколько кнопок в javascript, добавить ONE onclick, и кнопка должна отправить правильное значение;

Права значения в этом Exemple является: Здравствуйте «„До свидания“или» Эй, Гари

Моей кнопка функция не работает, и я не знаю, как отправить правильное значение, помогите мне, пожалуйста

благодарственной вы!

html 
    <div id="main"> </div> 

Javascript

info = ["Hello", "Bye", "Hey Gary"]; 
for (i = 0; i < 3; i++){ 
document.getElementById('main').innerHTML += "<a id='" + info[i] + "' class='list-group-item'>"+info[i]+"</a>"; 
document.getElementById(info[i]).innerHTML += "<input class='btn btn-danger pull-right'  class='test77' value='send'>"; 
document.getElementById('main').innerHTML += "<br><hr></hr>"; 
} 
    createbutton(); 

function createbutton() { 
$(".test77").click(function() { 
alert("i want to send information at the left"); 
}); 
} 

Jsfiddle https://jsfiddle.net/prodeinfo/sep1jzpc/2/

Answer 1

ваш вход должен быть type="button", и у вас есть кнопки он class определяется дважды.

info = ["Hello", "Bye", "Hey Gary"]; 
 
for (var i = 0; i < info.length; i++) { 
 
    document.getElementById('main').innerHTML += "<a id='" + info[i] + "' class='list-group-item'><span>" + info[i] + "</span></a>"; 
 
    document.getElementById(info[i]).innerHTML += "<input type='button' class='btn btn-danger pull-right test77' value='send'>"; 
 
    document.getElementById('main').innerHTML += "<br><hr></hr>"; 
 
} 
 
createbutton(); 
 

 
function createbutton() { 
 
    $(".test77").click(function() { 
 
    alert($(this).parent().find('span').text()); 
 
    }); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"></div>

Answer 2

Вопрос не очень ясно о том, что ЛЕВЫЙ есть. Но, возможно, вы просите следующее.

function createbutton() { 
    $(".test77").click(function (e) { 
     var text = e.target.previousSibling.innerText; 
     alert(text); 
    }); 
} 

Answer 3

Это то, что вы ищете?

$(document).ready(function() { 
 

 
var info = ["Hello", "Bye", "Hey Gary"]; 
 
for (i = 0; i < 3; i++){ 
 
\t document.getElementById('main').innerHTML += "<a id='" + info[i] + "' class='list-group-item'>"+info[i]+"</a>"; 
 
\t document.getElementById(info[i]).innerHTML += "<input class='myBtn btn btn-danger pull-right' \t class='test77' value='send'>"; 
 
\t document.getElementById('main').innerHTML += "<br><hr></hr>"; 
 
} 
 

 
createbutton(); 
 
      
 
function createbutton() { 
 
\t $(".myBtn").click(function() { 
 
\t \t var value = $(this).closest("a").text(); 
 
\t \t alert(value); 
 
\t }); 
 
} 
 
\t 
 

 

 

 

 
});

.pull-right { 
 
    float: right!important; 
 
} 
 
.btn-danger { 
 
    color: #fff; 
 
    background-color: #d9534f; 
 
    border-color: #d43f3a; 
 
} 
 
.btn { 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="main"> </div>