2013-06-25 46 views
5

Tôi đã thấy nhiều chuỗi liên quan đến tiêu đề câu hỏi của mình.Chuyển ID phần tử sang hàm Javascript

Đây là HTML Codes:

<button id="button1" class="MetroBtn" onClick="myFunc(this.id);">Btn1</button> 
<button id="button2" class="MetroBtn" onClick="myFunc(this.id);">Btn2</button> 
<button id="button3" class="MetroBtn" onClick="myFunc(this.id);">Btn3</button> 
<button id="button4" class="MetroBtn" onClick="myFunc(this.id);">Btn4</button> 

Và một chức năng JS rất đơn giản là ở đây:

function myFunc(id){ 
     alert(id); 
} 

Bạn có thể nhìn thấy trong JsFiddle.

Vấn đề là:

Tôi không có ý tưởng, có lẽ không vượt qua this.id-myFunc chức năng, hoặc một số vấn đề khác.

Sự cố là gì?

Mọi trợ giúp sẽ được đánh giá cao.

+3

Đã fiddle của bạn và thay đổi 1 điều, đây làm việc: http://jsfiddle.net/h7kRt/2/ – MisterBla

Trả lời

7

Trong jsFiddle theo mặc định mã bạn gõ vào khối kịch bản được gói trong một chức năng thực thi trên window.onload:

<script type='text/javascript'>//<![CDATA[ 
    window.onload = function() { 
     function myFunc(id){ 
      alert(id);  
     } 
    } 
//]]> 
</script> 

Bởi vì điều này, chức năng của bạn myFunc không nằm trong phạm vi toàn cầu như vậy là không có sẵn cho các nút html của bạn. Bằng cách thay đổi tùy chọn để No-wrap in <head> như Sergio gợi ý mã của bạn không bọc:

<script type='text/javascript'>//<![CDATA[ 
    function myFunc(id){ 
     alert(id);  
    } 
//]]> 
</script> 

và do đó chức năng là trong phạm vi toàn cầu và có sẵn cho các nút html của bạn.

6

Kiểm tra này: http://jsfiddle.net/h7kRt/1/,

bạn nên thay đổi trong jsfiddle vào phía trên bên trái để No-wrap in <head>

Mã của bạn có vẻ tốt và nó sẽ làm việc bên trong một trang bình thường. Trong jsfiddle, hàm của bạn đã được định nghĩa bên trong một trình xử lý tải và do đó nằm trong một phạm vi khác. Bằng cách thay đổi thành No-wrap bạn có nó trong phạm vi toàn cầu và có thể sử dụng nó như bạn muốn.

+0

Vâng, nhưng nó sẽ được tốt đẹp để giải thích lý do tại sao * * làm việc này ... – lonesomeday

+1

Ngoài ra nó sẽ được tốt đẹp để thực sự bao gồm mã ở đây, không phải dựa vào trang web của bên thứ 3. – nothrow

+1

@Yossarian, mã nào? Tôi đã thay đổi không có mã, anh ta chỉ quên đặt "No-wrap" trong jsfiddle. – Sergio

3

này sẽ làm việc:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function myFunc(id) 
      { 
       alert(id); 
      } 
     </script> 
    </head> 

    <body> 
     <button id="button1" class="MetroBtn" onClick="myFunc(this.id);">Btn1</button> 
     <button id="button2" class="MetroBtn" onClick="myFunc(this.id);">Btn2</button> 
     <button id="button3" class="MetroBtn" onClick="myFunc(this.id);">Btn3</button> 
     <button id="button4" class="MetroBtn" onClick="myFunc(this.id);">Btn4</button> 
    </body> 
</html> 
0

Vấn đề đối với tôi là đơn giản như chỉ không biết javascript tốt. Tôi đã cố gắng để vượt qua tên của id bằng cách sử dụng dấu ngoặc kép, khi tôi nên có được sử dụng duy nhất. Và nó hoạt động tốt.

này làm việc:

validateSelectizeDropdown('#PartCondition') 

này không:

validateSelectizeDropdown("#PartCondition") 

Và chức năng:

function validateSelectizeDropdown(name) { 
    if ($(name).val() === "") { 
     //do something 
    } 
} 
0

bạn có thể sử dụng này.

<html> 
    <head> 
     <title>Demo</title> 
     <script> 
      function passBtnID(id) { 
       alert("You Pressed: " + id); 
      } 
     </script> 
    </head> 
    <body> 
     <button id="mybtn1" onclick="passBtnID('mybtn1')">Press me</button><br><br> 
     <button id="mybtn2" onclick="passBtnID('mybtn2')">Press me</button> 
    </body> 
</html> 
Các vấn đề liên quan