通過 html 標簽實現 onclick 按鈕的 js 功能

Question

我正在嘗試使用此語法編寫以在我的選擇按鈕中調用 js 功能...

<button onclick="UversePlanSelector()">Select</button>

但它不能正常工作。 你能告訴我如何解決嗎？ 在下面提供我的代碼：

<div id="wrap_plans">
        
        <div class="plan">
            <div class="plan_head"><span class="hdr">Power</span><span class="tag">$64.95</span>
            </div>
            <div class="plan_spec"><span class="hdr">45 / 8</span> Mbps</div>
            <button onclick="UversePlanSelector()">Select</button>
        </div>
    </div>

Answer 1

首先，UversePlanSelector 不在全局對象中

從：

function UversePlanSelector(wrap, plans_in, plans_tv) {...
// > ReferenceError: UversePlanSelector is not defined

至：

UversePlanSelector = function UversePlanSelector(wrap, plans_in, plans_tv) {...

二、UversePlanSelector是構造函數

從：

<button onclick="UversePlanSelector()">Select</button>
// > Uncaught TypeError: Object [object global] has no method 'init'

至：

<button onclick="new UversePlanSelector()">Select</button>

第三，UversePlanSelector 接受 3 個參數，沒有一個給出

宣言：

UversePlanSelector = function UversePlanSelector(wrap, plans_in, plans_tv) {...

稱呼：

<button onclick="new UversePlanSelector( /* No args given */ )">Select</button>

連貫性：

> Uncaught TypeError: Cannot read property 'length' of undefined

可能在plans_in 中，但我認為你應該是進一步調試它的人:-)

Answer 2

jsfiddle 會將所有 js 代碼包裝到一個函數中，這就是您的 html 看不到的原因。 要解決這個問題，只需將您的函數分配給一個變量，如下所示：

window.f = function() {...} //instead of function f() {...}

檢查更新的提琴手