Upon inspecting your pen, I noticed some issues that may have led to the failure of your code.
Allow me to clarify why.
var fieldOne = document.getElementById('field-one').innerHTML
var fieldTwo = document.getElementById('field-Two').innerHTML
let button = document.getElementById('button');
button.addEventListener('click', () => {
window.location.href = 'www.website.com/reports/' + fieldOne + '/reports/' + fieldTwo + '/reports.aspx'
});
Firstly, it is incorrect to use ‘ quotation marks in JS. You should use ' " ` instead.
The second issue lies in how you are retrieving the field values incorrectly in two different ways. To fetch the value of an input field, you must utilize .value instead of .innerHTML.
Furthermore, you are fetching the input field values when the document is ready, resulting in them always being empty.
Moreover, you referenced field-Two, whereas it should be field-two (JS is case-sensitive)
Besides these errors, your code should function correctly. Let me present a revised version:
let button = document.getElementById('button');
button.addEventListener('click', () => {
var fieldOne = document.getElementById('field-one').value
var fieldTwo = document.getElementById('field-two').value
var url = `www.website.com/reports/${fieldOne}/reports/${fieldTwo}/reports.aspx`;
// or
var url = 'www.website.com/reports/'+ fieldOne +'/reports/'+ fieldTwo +'/reports.aspx';
window.location.href = url;
});
Notice how I store the URL in a variable for clarity. While not necessary, I find it helpful. You can choose between the two methods of declaration based on your preference (note the different types of quotation marks depending on whether you use template literals or not)