Hej, nu vill jag bråka lite igen. Jag vill att HTML-dokumentet ska bevaras intakt men lägga till en ja/nej-confirm när element (länkar) i klassen deleteDish trycks ned, varpå (kan jag tänka mig) true returneras vid ja och false vid nej (eller avbryt o.s.v.), och händelsen fullföljs.
Confirm-ruta enligt DOM
11 svar · 660 visningar · startad av Helmertz
Om jag förstått det hela rätt så borde följande fungera:
window.onload = function()
{
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
if (links[i].className == "deleteDish")
{
links[i].onclick = function() { return confirm("Ta bort?"); }
}
}
}
Nja
när man loopar igenom sådär så brukar motorn trigga på följande:
links.className
och ge felet: links has no properties.
Dessutom om man ska vara riktigt petig så kan man ha fler än en class. Jag hade valt att göra följande:
window.onload = function()
{
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
var link=links[i]
if (link.className.match("deleteDish"))
{
link.onclick = function() { return confirm("Ta bort?"); }
}
}
}
Ditt sätt fungerade bra, colione, men jag får be om ytterligare assistans.
Just nu ser min script-fil ut så här:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
function toggleDelMenu(){
if (document.getElementById("pickupDel").checked){
document.getElementById("homeDelMenu").style.display = "none";
}else{
document.getElementById("homeDelMenu").style.display = "block";
}
}
function prepToggleDelMenu(){
document.getElementById("homeDel").onclick = toggleDelMenu;
document.getElementById("pickupDel").onclick = toggleDelMenu;
toggleDelMenu();
}
addLoadEvent(prepToggleDelMenu);
Jag försökte själv att lägga till funktionen du skrev men det ville sig inte. Skulle du kunna visa hur man gör?
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
function toggleDelMenu(){
if (document.getElementById("pickupDel").checked){
document.getElementById("homeDelMenu").style.display = "none";
}else{
document.getElementById("homeDelMenu").style.display = "block";
}
}
function prepToggleDelMenu(){
document.getElementById("homeDel").onclick = toggleDelMenu;
document.getElementById("pickupDel").onclick = toggleDelMenu;
toggleDelMenu();
}
function prepDelConf()
{
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
var link=links[i]
if (link.className.match("deleteDish"))
{
link.onclick = function() { return confirm("Ta bort?"); }
}
}
}
addLoadEvent( function() {
prepToggleDelMenu();
prepDelConf();
}
);
Nej, det fungerade inte. Det är tänkt att se ut som:
addLoadEvent([i]function[/i]);
men det fungerar inte heller. :q
document.onclick = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
while (target.tagName != "A" && target.parentNode)
target = target.parentNode;
if (/(^|\s)deleteDish($|\s)/.test(target.className))
return confirm("Ta bort?");
return true;
}
(Nu har jag inte tittat på vad ditt nuvarande skript gör dock så det här kanske inte var till så mycket hjälp... :) )
Jag har inte testat din variant ännu, zcorpan, men har den större kompabilitet i webbläsarna så använder jag den istället. Frågan kvarstår dock hur man infogar funktionen i addLoadEvent.
Den koden funkar utmärkt för mig. Jag har testat mot följande:
<html>
<head><script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
function toggleDelMenu(){
if (document.getElementById("pickupDel").checked){
document.getElementById("homeDelMenu").style.display = "none";
}else{
document.getElementById("homeDelMenu").style.display = "block";
}
}
function prepToggleDelMenu(){
document.getElementById("homeDel").onclick = toggleDelMenu;
document.getElementById("pickupDel").onclick = toggleDelMenu;
toggleDelMenu();
}
function prepDelConf()
{
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
var link=links[i]
if (link.className.match("deleteDish"))
{
link.onclick = function() { return confirm("Ta bort?"); }
}
}
}
addLoadEvent( function() {
prepToggleDelMenu();
prepDelConf();
}
)
</script>
</head>
<body>
<a href="foo" class="deleteDish">foo</a><br>
<a href="foo" class="deleteDish">foo</a><br>
<a href="foo" class="deleteDish">foo</a><br>
<a href="foo" class="deleteDish">foo</a><br>
<a href="foo" class="deleteDish">foo</a><br>
<input type="checkbox" id="pickupDel">pick<br>
<input type="checkbox" id="homeDel">home<br>
<div id="homeDelMenu">foobar</div>
</body>
</html>
har nte helelr testat zcorpans kod, men den ska fungera lika bra som de övriga. Det är lite upp till dig om du vill lägga till onclick eventet till a-taggarna med classnamet deleteDish innan eller om du vill att funktionen körs varje gång någon klickar och triggar på om musklicket var inom en a-tagg med classname deleteDish.
Mitt problem löste sig, tack Colione. Detta script includeras på varje sida, även de som inte har ett element med id:t delHome i sig. Nu utförs en check innan. Så här blev scriptet:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
function toggleDelMenu(){
if (document.getElementById("pickupDel").checked){
document.getElementById("homeDelMenu").style.display = "none";
}else{
document.getElementById("homeDelMenu").style.display = "block";
}
}
function prepToggleDelMenu(){
if(document.getElementById("homeDel")) document.getElementById("homeDel").onclick = toggleDelMenu;
if(document.getElementById("pickupDel")) document.getElementById("pickupDel").onclick = toggleDelMenu;
if(document.getElementById("homeDel") && document.getElementById("pickupDel")) toggleDelMenu();
}
function prepDelConf()
{
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
var link = links[i];
if (link.className.match("deleteDish")){
link.onclick = function(){
return confirm("Ta bort denna maträtt?");
}
}
}
}
addLoadEvent(prepToggleDelMenu);
addLoadEvent(prepDelConf);
Eftersom denna kod är den rätta markerar jag mitt eget svar som lösning men tack för hjälpen!
Dock så tycker jag det är snyggare att inkludera båda funktionerna samtidigt i addLoadEvent.
addLoadEvent( function() {
prepToggleDelMenu();
prepDelConf();
}
)
Men det är ju en smaksak.