truyền tham số chuỗi trong hàm onclick

225

Tôi muốn chuyển một tham số (tức là một chuỗi) cho hàm Onclick. Hiện tại, tôi làm điều này:

'<input type="button" onClick="gotoNode(' + result.name + ')" />'

với result.name chẳng hạn bằng chuỗi "Thêm". Khi tôi nhấp vào nút này, tôi gặp lỗi thông báo rằng Add không được xác định. Vì hàm này hoạt động hoàn hảo với một tham số số, tôi giả sử rằng nó có liên quan đến các ký hiệu "" trong chuỗi. Có ai có vấn đề này trước đây?

javascript html

— JasperTack
nguồn

1

Trong trường hợp này có thể tốt hơn là không sử dụng các trình xử lý sự kiện nội tuyến.

— Felix Kling

1

Vấn đề của bạn là do biến không được thoát đúng. Kiểm tra câu trả lời của tôi

— Starx

351

Có vẻ như bạn đang xây dựng các phần tử DOM từ các chuỗi. Bạn chỉ cần thêm một số trích dẫn xung quanh result.name:

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

Bạn thực sự nên làm điều này với các phương thức DOM thích hợp mặc dù.

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

document.body.appendChild(inputElement);

Chỉ cần lưu ý rằng nếu đây là một vòng lặp hoặc một cái gì đó, resultsẽ thay đổi trước khi sự kiện bắt đầu và bạn cần tạo một bong bóng phạm vi bổ sung để theo dõi biến số thay đổi.

— yêu
nguồn

7

Định dạng này của các biểu tượng không hoạt động, vì vậy cảm ơn bạn rất nhiều

— JasperTack

2

Xin chào @ david..Tôi có một nghi ngờ ... Tôi muốn vượt qua nhiều đối số trong đó onclick..làm sao có thể? bạn có thể làm cho tôi hữu ích ..?

— VIVEK-MDU

2

@ david, cảm ơn nó đã giải quyết vấn đề tham số chuỗi của tôi nhưng bây giờ tôi phải vượt qua (chuỗi, boolean). Làm gì cho việc đó?

— Zaveed Abbasi

1

Cảm ơn, nó thực sự đã giúp tôi :)

— Hitesh

2

@david: bạn có thể nói một chút về lý do tại sao chúng ta cần thêm trích dẫn xung quanh đó không

— Hitesh

34

Một số mối quan tâm đối với tôi liên quan đến việc sử dụng thoát chuỗi trong onClick và khi số lượng đối số tăng lên, nó sẽ trở nên cồng kềnh để duy trì.

Cách tiếp cận sau đây sẽ có một bước nhảy - Khi nhấp - đưa điều khiển đến phương thức xử lý và phương thức xử lý, dựa trên đối tượng sự kiện, có thể khấu trừ sự kiện nhấp và đối tượng tương ứng.

Nó cũng cung cấp một cách sạch hơn để thêm nhiều đối số và linh hoạt hơn.

<button type="button" 
        className="btn btn-default" 
        onClick="invoke" 
        name='gotoNode' 
        data-arg1='1234'>GotoNode</button>

Trên lớp javascript:

  invoke = (event) => {
    let nameOfFunction = this[event.target.name];
    let arg1 = event.target.getAttribute('data-arg1');
    //We can add more args as needed...
    window[nameOfFunction](arg1) 
    //hope function is in window. 
    //Else the respective object need to be used 
    })
  }

Ưu điểm ở đây là chúng ta có thể có càng nhiều đối số (trong ví dụ trên, data-arg1, data-arg2 ....) khi cần.

— Sairam KR
nguồn

2

Tôi ngạc nhiên khi điều này không nhận được nhiều sự ủng hộ hơn vì đây là phương pháp sạch hơn để truyền các đối số cho một bộ xử lý sự kiện.

— Tim O'Brien

Điều này không hoạt động, invokekhông được gọi khi bạn nhấp vào nút

— tanguy_k

Giải pháp tuyệt vời! Nếu bạn cần vượt qua Mảng hoặc Đối tượng, chỉ cần sử dụng JSON.stringify(obj)trong HTML và JSON.parse(event.target.getAttribute('data-arg'))trong lớp JavaScript

— leo lên

@SairamKrish Trong trường hợp của tôi, nếu tôi nhấp vào nút tôi đã đặt để hiển thị id, ảnh chụp màn hình: snag.gy/7bzEWN.jpg mã: pastiebin.com/5d35674e2fc31

— Gem

Điều này có thể hoạt động, nhưng nó là một bản tóm tắt, triển khai không điển hình sẽ khó theo dõi đối với một nhà phát triển khác cần duy trì điều này.

— Spencer Sullivan

24

Tôi đề nghị thậm chí không sử dụng onclicktrình xử lý HTML và sử dụng một cái gì đó phổ biến hơn như document.getElementById.

HTML:

<input type="button" id="nodeGoto" />

JavaScript:

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);

— kevinji
nguồn

onclickkhông phải là một chức năng, đó là một tài sản bạn phải gán một chức năng cho:....onclick = function() {...};

— Felix Kling

@FelixKling Cảm ơn vì điều đó, đầu tôi vẫn ở chế độ jQuery.

— kevinji

4

Bạn đang cho rằng sẽ chỉ có một trong những đầu vào này.

— Madbreaks

Vâng, câu hỏi của OP ngụ ý rằng sẽ chỉ có một đầu vào.

— kevinji

Tôi nghĩ tùy chọn này không phù hợp với tôi, vì tôi tạo ra nhiều nút do hoạt động tìm kiếm. Tôi có thể giải quyết vấn đề này bằng cách sử dụng bộ đếm để thêm vào id nhưng tôi muốn giữ cho nó đơn giản và giữ cho nó nội tuyến

— JasperTack

21

Tôi đoán, bạn đang tạo một nút bằng chính JavaScript. Vì vậy, lỗi trong mã của bạn là, nó sẽ hiển thị ở dạng này

<input type="button" onClick="gotoNode(add)" />'

Ở trạng thái hiện tại này, addsẽ được coi là một định danh như các biến hoặc các hàm gọi. Bạn nên thoát khỏi giá trị như thế này

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

— Starx
nguồn

16

Đây là một cách tốt đẹp và gọn gàng để gửi giá trị hoặc đối tượng.

<!DOCTYPE html>
<html>
<body>
<h1  onclick="test('wow',this)">Click on this text!</h1>
<script>
var test =function(value,object){  
object.innerHTML=value;
};     
</script>
</body>
</html>

— ham hố zokaee
nguồn

8

Thử cái này..

HTML:

<button id="a1" type="button" onclick="return a1_onclick('a1')">a1</button>

JavaScript:

<script language="javascript" type="text/javascript">
    function a1_onclick(id) {
        document.getElementById(id).style.backgroundColor = "#F00";   
    }
</script>

Lưu ý: hãy chắc chắn gửi các đối số giữa '' dấu hiệu như ('a1') trong mã html

— Mawardy
nguồn

cảm ơn!! đã tìm kiếm thử nghiệm này trong vài giờ

— cweitat

Có ai giúp không? Trong trường hợp của tôi, nếu tôi nhấp vào nút tôi đã đặt để hiển thị id, ảnh chụp màn hình: snag.gy/7bzEWN.jpg mã: pastiebin.com/5d35674e2fc31

— Gem

6

bạn cũng sử dụng ký hiệu trọng âm (`) trong chuỗi

thử :

`<input type="button" onClick="gotoNode('${result.name}')" />`

để biết thêm thông tin, hãy truy cập MDN và Stackoverflow

Do Chrome, Edge, Firefox (Gecko), Opera, Safari hỗ trợ, nhưng không hỗ trợ Internet Explorer.

— MJ Vakili
nguồn

6

nếu nút của bạn được tạo động:

Bạn có thể truyền tham số chuỗi cho các hàm javascript như mã dưới đây:

Tôi đã truyền 3 tham số trong đó tham số thứ ba là tham số chuỗi hy vọng điều này có ích.

var btn ="<input type='button' onclick='RoomIsReadyFunc("+ID+","+RefId+",\""+YourString+"\");'  value='Room is Ready' />";

//your javascript function

function RoomIsReadyFunc(ID, RefId, YourString)
{
  alert(ID);
  alert(RefId);
  alert(YourString);
}

— MJVM
nguồn

1

Đẹp, sạch sẽ và đơn giản. Cảm ơn

5

Đã chỉnh sửa: Nếu yêu cầu là tham chiếu đối tượng toàn cầu (js) trong mã HTML của bạn, bạn có thể thử điều này. [Không sử dụng bất kỳ dấu ngoặc kép ('hoặc ") xung quanh biến]

Fiddle tham khảo.

Javascript:

var result = {name: 'hello'};
function gotoNode(name) {
    alert(name);
}

HTML:

<input value="Hello" type="button" onClick="gotoNode(result.name)" />

— Sandeep GB
nguồn

Tôi gặp lỗi khi thử giải pháp này: phần "+ result.name +" được sử dụng dưới dạng chuỗi trong trường hợp này

— JasperTack

đối tượng "kết quả" là gì? Đây có phải là biến toàn cục được khai báo trong JS không? như ... var result = {name: 'javascript'};

— Sandeep GB

kết quả chứa một bản ghi từ thư viện jowl: đó là cấu trúc json với tên thuộc tính, loại, ...

— JasperTack

Jaspack, tôi đã cập nhật câu trả lời. Nó làm việc cho bạn bây giờ?

— Sandeep GB

Cảm ơn bạn về ví dụ, nhưng điều đó không hoạt động trong trường hợp của tôi: biến kết quả không phải là toàn cục, mà là một biến trong một thủ tục. Vì vậy, khi tôi gọi hàm bằng result.name, kết quả không được biết đến

— JasperTack

4

Nhiều tham số:

   bounds.extend(marker.position);
        bindInfoWindow(marker, map, infowindow,
     '<b>' + response[i].driver_name + '</b><br>' + 
     '<b>' +moment(response[i].updated_at).fromNow() + '</b>
      <button onclick="myFunction(\''+response[i].id+'\',\''+driversList+'\')">Click   me</button>'
    );

— Zahid Rahman
nguồn

2

Để truyền nhiều tham số, bạn có thể truyền chuỗi bằng cách nối chuỗi đó với giá trị ASCII như, đối với các trích dẫn đơn lẻ, chúng ta có thể sử dụng '

var str= "&#39;"+ str+ "&#39;";

— Ông Talha
nguồn

2

Đây là một giải pháp Jquery những gì tôi đang sử dụng.

Jquery

$("#slideshow button").click(function(){
    var val = $(this).val();
    console.log(val);
});

HTML

<div id="slideshow">
    <img src="image1.jpg">
    <button class="left" value="back">&#10094;</button>
    <button class="right" value="next">&#10095;</button>
</div>

— DamianToczek
nguồn

1

Bạn có thể chuyển hàm điều chỉnh hoặc giá trị chuỗi chỉ cần đặt hàm bên trong dấu phẩy doube "" bên dưới ảnh chụp nhanh

nhập mô tả hình ảnh ở đây

— Abdul Khaliq
nguồn

0

Để truyền nhiều tham số, bạn có thể truyền chuỗi bằng cách nối chuỗi đó với giá trị ASCII như, đối với dấu ngoặc đơn chúng ta có thể sử dụng '

var str= "&#39;"+ str+ "&#39;";

cùng một tham số bạn có thể chuyển đến sự onclick()kiện. Trong hầu hết các trường hợp, nó hoạt động với mọi trình duyệt.

— PVIJAY
nguồn

0

nếu sử dụng để tạo một tập hợp các nút với các thông số khác nhau của trình xử lý. https://www.w3schools.com/js/js_feft_closures.asp

let some_button = document.createElement( "button" );
some_button.type = "button";

some_button.onclick = doWithParam( some_param );

function doWithParam( param ){
   return function(){
      alert( param );//<------Your code here
   }
}

nếu chúng ta làm:

some_button.onclick = foo( some_param );
function foo( param ){
    alert( param );
}

Sau đó, chức năng foo bắt đầu sau mỗi trang cập nhật.

nếu chúng ta làm:

for( let i = 0; i < 10; ++i ){
    var inputElement = document.createElement('input');
    inputElement.type = "button"
    inputElement.addEventListener('click', function(){
        gotoNode(result.name);
    });

   document.body.appendChild(inputElement);
}

sau đó cho tất cả các nút được tạo trong vòng lặp, giá trị cuối cùng của tham số "result.name"

— Tiếng Việt
nguồn

0

nếu bạn đang sử dụng asp, bạn có thể sử dụng javascript:

HTML:

<input type='button' value='test' onclick='javascript: EditSelectedOptionName(x,y)' />"

Javascript:

function EditSelectedOptionName(id, name) {
        console.log(id);
        console.log(name);
 }

— Abdullah Tahan
nguồn

0

Nếu bạn đang thêm nút hoặc liên kết động và đối mặt với vấn đề thì đây có thể là trợ giúp. Tôi đã giải quyết bằng cách này.

var link= $(contentData1[i]).find("td:first font b a").attr("href",'javascript:onClick=openWin(\'' + tdText + '\')');

Tôi chưa quen với HTML, JQuery và JS. Vì vậy, có thể mã của tôi sẽ không được tối ưu hóa hoặc cú pháp, nhưng nó đã hoạt động với tôi.

— Avinash Verma
nguồn

0

Trong Dao cạo, bạn có thể truyền tham số động: @ Model.UnitNameVMs [i] .UnitNameID

— Ghadir Farzaneh
nguồn

0

Bạn có thể sử dụng cái này,

'<input id="test" type="button" value="' + result.name + '" />'

$(document)..on('click', "#test", function () {
        alert($(this).val());
});

nó làm việc cho tôi

— Agung Panduan
nguồn

-1

    <style type="text/css">
        #userprofile{
              display: inline-block;
              padding: 15px 25px;
              font-size: 24px;
              cursor: pointer;
              text-align: center;
              text-decoration: none;
              outline: none;
              color: #fff;
              background-color: #4CAF50; //#c32836
              border: none;
              border-radius: 15px;
              box-shadow: 0 9px #999;
              width: 200px;
              margin-bottom: 15px;

        }
        #userprofile:hover {
            background-color: #3e8e41
        }
        #userprofile:active {
              background-color: #3e8e41;
              box-shadow: 0 5px #666;
              transform: translateY(4px);
        }
        #array {
                border-radius: 15px 50px;
                background: #4a21ad;
                padding: 20px;
                width: 200px;
                height: 900px;
                overflow-y: auto;
            }

    </style>
if(data[i].socketid!=""){
$("#array").append("<button type='button'  id='userprofile' class='green_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");                    
                }else{
                    console.log('null socketid  >>', $("#userprofile").css('background-color')); 
                    //$("#userprofile").css('background-color','#c32836 ! important');


$("#array").append("<button type='button'  id='userprofile' class='red_button' name="+data[i]._id+" onClick='chatopen(name)'>"+data[i].username+"</button></br>");  
                $(".red_button").css('background-color','#c32836');             
                }

— Jay Jariwala
nguồn

Vui lòng giải thích mã của bạn, câu trả lời này tự nó không hữu ích

— Phil Hudson

-1

Những điều sau đây đối với tôi rất tốt,

<html>
<head>
    <title>HTML Form</title>
</head>
<body>
    <form>
        <input type="button" value="ON" onclick="msg('ON')">
        <input type="button" value="OFF" onclick="msg('OFF')">
    </form>
    <script>
        function msg(x){
            alert(x);
        }
    </script>
</body>
</html>

— Sayan Shankhari
nguồn

1

OP không hỏi về một giá trị không đổi. Điều này không trả lời câu hỏi.

— RubioRic

-1

Bạn có thể sử dụng mã này trong phương thức onclick nút của bạn:

<button class="btn btn-danger" onclick="cancelEmployee(\''+cancelButtonID+'\')" > Cancel </button>

— Giải pháp tinh thần
nguồn