On my chrome extension I attempt to create a click on counter with a reset button however I’ve slightly drawback, the 2 buttons are in an html type tag which blocks them however once I put the 2 buttons outdoors the Kind tag it really works, my query is there a solution to put the 2 buttons within the type tag with out them being blocked?
right here is the content material of my popup.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<hyperlink rel="stylesheet" kind="textual content/css" href="https://information.google.com/__i/rss/rd/articles/model.css" media="display">
</head>
<physique>
<heart>
<div class="field">
<type identify="myForm" id="myForm">
<h2> Please enter a code </h2>
<button id="btn" title="Entrée"></button>
<button id="reset-button" title="Actualiser">⭮</button>
<enter identify="inpt" id="inpt" maxlength="10" autocomplete="off"/>
<h3 id="counter-label" title="Nombre de ticket créer">0</h3>
</type>
<!-- <button id="btn" title="Entrée"></button> -->
<!-- <button id="reset-button" title="Actualiser">⭮</button> -->
</div>
</heart>
</physique>
<script src="popup.js"></script>
</html>
And right here is the content material of my popup.js
window.addEventListener('DOMContentLoaded', setUpStuff, false);
perform setUpStuff(){
doc.getElementById("inpt").focus();
let optionsButton = doc.getElementById('btn');
optionsButton.addEventListener('click on', perform()
var empt = doc.myForm.inpt.worth;
if (empt === "")
//coller
doc.execCommand("paste");
navigator.clipboard.readText()
.then(txt =>
doc.getElementById("inpt").worth = txt;
)
chrome.tabs.question(lively: true, currentWindow: true, perform(tabs)
chrome.tabs.sendMessage(tabs[0].id, functionnum: doc.getElementById("inpt").worth.toUpperCase());
);
return false;
else
//sans coller
chrome.tabs.question(lively: true, currentWindow: true, perform(tabs)
chrome.tabs.sendMessage(tabs[0].id, functionnum: doc.getElementById("inpt").worth.toUpperCase());
);
return true;
);
}
//counter+reset
doc.addEventListener('DOMContentLoaded', perform()
var clickbtn = doc.getElementById('btn');
var resetBtn = doc.getElementById('reset-button');
var x=0
clickbtn.addEventListener("click on", perform onClick()
let counter = doc.getElementById('counter-label');
x = x+1;
doc.getElementById('counter-label').innerHTML = x;
);
resetBtn.addEventListener("click on", perform onClick()
x=0 ;
doc.getElementById('counter-label').innerHTML = x;
);
);
Hello,
I nonetheless had the code from the earlier extension, so I assumed I’d give this a go. Sadly, the code you posted above doesn’t let me recreate your drawback.
If I needed to guess, I’d say that buttons inside type tags have a tendency to submit the shape (their kind defaults to submit), in order that could possibly be inflicting you issues. Strive giving the buttons a sort of “button” and see if that helps:
<button kind="button" id="btn" title="Entrée">Entrée</button>
Hello,
when i add kind=“button” to button id=“btn” and I click on on enter nothing occurs the counter is just not blocked however the enter button doesn’t work on this case
Okay. Are you able to then please add sufficient code that I can reproduce your drawback and let me know which website I can take a look at it towards (if that’s necessary).
1 Like
That you just say that it really works when the buttons are situated outdoors the shape tag exhibits that the js code is working and that it’s in all probability working earlier than the DOM is absolutely created.
My resolution can be to incorporate a “defer” attribute within the “script” tag.
I’d additionally relocate the script tag as a toddler of the “head” tag.
1 Like
Thanks very a lot, lastly I used to be in a position to resolve the issue
