I have been attempting to design a button using a simple Ajax / Javascript command. It seems to be functioning properly, but I am encountering an issue where it does not appear on the main page when inspecting with F12, causing some complications.
Below is the code snippet:
<html>
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<button class="createButton" id="create_Button" onclick='button_creation()'>Create me</button>
</body>
<script>
function button_creation()
{
button_exist = document.getElementById('submit_button');
if(button_exist == null)
{
btn = document.createElement("BUTTON");
btn.innerHTML = "Submit";
btn.setAttribute("type","submit");
btn.setAttribute("name","submit");
btn.setAttribute("value","submit");
document.body.appendChild(btn);
}
}
</script>
The script functions properly, but whenever I continue to press the button, it creates additional buttons. I believe this is because it does not appear on the F12 of the main page. However, when I access the console (F12) and type "document.getElementById('submit_button')", I can see all the values I entered.
Does anyone know why the Ajax / Javascript code is not appearing in my F12 and how I can resolve this issue?
Thank you in advance.