Currently, I have a functional app that can dynamically change the values of buttons based on user input. The current implementation is in vanilla JavaScript within the script.js file. However, I am looking to enhance the functionality and user experience by transitioning to jQuery. Unfortunately, when I include the jQuery library and CSS file in the index.html, the buttons lose their values. I am struggling with completely converting the code to jQuery while maintaining its original functionality.
Here is a snippet from the existing JavaScript code (let me know if you need to see the entire script):
ajax_status.onreadystatechange = function() {
if(ajax_status.readyState == 4 && ajax_status.status == 200) {
if(ajax_status.responseText == "ready_vid") {
document.getElementById("video_button").disabled = false;
document.getElementById("video_button").value = "record video start";
// ... more button value assignments
}
else if(ajax_status.responseText == "ready_img") {
document.getElementById("video_button").disabled = true;
document.getElementById("video_button").value = "record video start";
// ... more button value assignments
}
HTML in index.html:
<input id="video_button" type="button">
<input id="image_button" type="button">
<input id="timelapse_button" type="button">
<input id="md_button" type="button"><br>
<input id="halt_button" type="button">
<input id="mode_button" type="button">
In addition to the above code, there are other jQuery scripts included in the index.html file. The JavaScript code mentioned earlier resides in a separate file named script.js. My concern is whether I should also add the link for jQuery.js in the script.js file? And how should I handle the $(document).ready(function()? Should it also be included in the script.js file?