11 svar · 677 visningar · startad av Helmertz
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.
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. 
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.