Адаптировать скрипт для работы с несколькими кнопками

Question

У меня есть скрипт, который открывает книгу, когда пользователь нажимает кнопку. Как я могу сделать эту работу тремя кнопками? В настоящее время работает только первая кнопка.

Этот код находится в head документа

<script type="text/javascript"> 
function submit_custom_form() { 
    product_id = document.getElementById("product-size-selection").value; 
    if(product_id) { 
     var params = ""; 
     // call and api library function to go to the software 
     Pixfizz.createBook(product_id, params) 
    } else { 
     alert("Please select a product from the dropdown"); 
    } 
} 
</script> 

и этот код в body

<div style="display: block; text-align: center;"> 
    <select id="product-size-selection" name="product-size-selection" style="margin: auto; font-family: formata; color: white; background-color: grey;"> 
     <option selected="selected" value="">Choose Your Size</option> 
     <option value="ACRYLICCOMBOCOVER6X8:6X8COMBOCOVER">6x8 Custom Acrylic Cover</option> 
     <option value="CUSTOMCOVER8X6:8X6FULLCOVER">8x6 Custom Satin Cover</option> 
     <option value="ACRYLICCOMBOCOVER8X8:8X8COMBOCOVER">8x8 Custom Acrylic Cover</option> 
     <option value="ACRYLICCOMBOCOVER9X12:9X12COMBOCOVER">9x12 Custom Acrylic Cover</option> 
    </select> 
</div> 
<div style="text-align: center;"> 
    <button onclick="javascript:submit_custom_form()">Create My Album</button> 
</div> 

Answer 1

Он смотрит на меня, как вы пытаетесь получить доступ к кнопкам через document.getElementById.

К сожалению, атрибут id может применяться только к одному элементу DOM. Это означает, что если у вас есть тот же идентификатор, определенный в нескольких тегах HTML, вы не получите ожидаемого результата.

Измените его на селектор классов и используйте document.getElementsByClassName.