On my chrome extension I try to create a click counter with a reset button but I have a little problem, the two buttons are in an html form tag which blocks them but when I put the two buttons outside the Form tag it works, my question is there a way to put the two buttons in the form tag without them being blocked?
here is the content of my popup.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<center>
<div class="box">
<form name="myForm" id="myForm">
<h2> Please enter a code </h2>
<button id="btn" title="Entrée"></button>
<button id="reset-button" title="Actualiser">⭮</button>
<input name="inpt" id="inpt" maxlength="10" autocomplete="off"/>
<h3 id="counter-label" title="Nombre de ticket créer">0</h3>
</form>
<!-- <button id="btn" title="Entrée"></button> -->
<!-- <button id="reset-button" title="Actualiser">⭮</button> -->
</div>
</center>
</body>
<script src="popup.js"></script>
</html>
And here is the content of my popup.js
window.addEventListener('DOMContentLoaded', setUpStuff, false);
function setUpStuff(){
document.getElementById("inpt").focus();
let optionsButton = document.getElementById('btn');
optionsButton.addEventListener('click', function() {
var empt = document.myForm.inpt.value;
if (empt === "")
{
//coller
document.execCommand("paste");
navigator.clipboard.readText()
.then(txt => {
document.getElementById("inpt").value = txt;
})
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {functionnum: document.getElementById("inpt").value.toUpperCase()});
});
return false;
}
else
{
//sans coller
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {functionnum: document.getElementById("inpt").value.toUpperCase()});
});
return true;
}
});
}
//counter+reset
document.addEventListener('DOMContentLoaded', function() {
var clickbtn = document.getElementById('btn');
var resetBtn = document.getElementById('reset-button');
var x=0
clickbtn.addEventListener("click", function onClick() {
let counter = document.getElementById('counter-label');
x = x+1;
document.getElementById('counter-label').innerHTML = x;
});
resetBtn.addEventListener("click", function onClick() {
x=0 ;
document.getElementById('counter-label').innerHTML = x;
});
});