Простая функция JS не работает

Question

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

<h2>Select a Payment Option:</h2> 

<form method="post" enctype='multipart/form-data'> 
    <input type="radio" name="addtocart" id="fullpay" value="66" onclick="fullpay();" /><h3 style="color: #f57e20;">Full Payment - <s>$119.80</s> $79.95</s></h3> 

    <input type="radio" name="addtocart" id="payments" value="69" onclick="payments();" /><h3 style="color: #f57e20;">Payment plan - $26.65/month for 3 months</h3> 
    <hr/> 
    <div id="cartbutton"></div> 
</form> 

JS:

window.onload = function(){ 

function fullpay(){ 
    var cartbutton = document.getElementById("cartbutton"); 
    cartbutton.innerHTML = "<a href='/?add-to-cart=66' rel='nofollow' data-product_id='66' data-product_sku='' class='button add_to_cart_button'>Add to cart</a>"; 
} 

function payments(){ 
    var cartbutton = document.getElementById("cartbutton"); 
    cartbutton.innerHTML = "<a href='/?add-to-cart=69' rel='nofollow' data-product_id='69' data-product_sku='' class='button add_to_cart_button'>Add to cart</a>"; 
    } 
}; 

Answer 1

вы определяете ваши функции внутри ваша "нагрузка" функция обработчика. Это означает, что функции являются частными для этой функции обработчика, поэтому они не видны в глобальном контексте.

Вы можете явно экспортировать функции пути присвоения ссылки на свойства на глобальном объекте (window), или, возможно, лучше использовать .addEventListener() внутри «нагрузку» обработчик настроить обработку вместо старой школы атрибутов событий в событие вашей разметки.

Answer 2

сделать вас функцию глобальным:

window.onload = function(){ 
// functions here are not global 
}; 

// functions here are global 
function fullpay(){ 
    var cartbutton = document.getElementById("cartbutton"); 
    cartbutton.innerHTML = "<a href='/?add-to-cart=66' rel='nofollow' data-product_id='66' data-product_sku='' class='button add_to_cart_button'>Add to cart</a>"; 
} 

function payments(){ 
    var cartbutton = document.getElementById("cartbutton"); 
    cartbutton.innerHTML = "<a href='/?add-to-cart=69' rel='nofollow' data-product_id='69' data-product_sku='' class='button add_to_cart_button'>Add to cart</a>"; 
    }