[FRAGE] Karos bemalen (wie bei Käsekästchen)

Kinkelin · 21. Dez. 2014

2 events + parentNode (Karos bemalen - Käsekästchen)

[GELÖST] (selber)

Ich schreibe gerade eine kleine(s) Website/Programm um auf Karos Linien zeichnen zu können. (wie bei Käsekästchen, nur ohne Regeln)
Das funktioniert auch schon wunderbar.
Edit fiddle - JSFiddle

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Karogenerator</title>
        <style type="text/css">
        #rahmen {width:600px;} /* Um alles zu begrenzen, ist aber bisher nur provisorisch. */
        .karo {
            width: 10px;
            height: 10px;
            border: 1px solid silver;
            margin:0px;
            float:left;
            }
        .oben {
            margin:0px;
            height:3px;
            width:10px;
            float:left;
            }
        .links {
            margin:0px;
            height:4px;
            width:5px;
            float: left;
            }
       .rechts {
            margin:0px;
            height:4px;
            width:5px;
            float: right;
            }
         .unten {
            margin:0px;
            height:3px;
            width:10px;
            float:left;
        </style>
        <script>
        <!--
       /* Als erstes werden allen karo divs ids zugewiesen. Da es später ein paar hundert bis tausend sein werden, ist das nötig.*/
        function hello() {
            var kaestchen = document.getElementsByClassName('karo');
            for (var i=0; i<10000; i++) {/* wenn 10000 nicht erreicht wird, bricht die Funktion einfach ab, ist zwar unschön stört aber nicht. */
            kaestchen[i].id="k"+String(i); 
                }
            }
      
        function oben(bla) {
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderTopColor=="black")document.getElementById(blubb).style.borderTopColor = "silver";
            else document.getElementById(blubb).style.borderTopColor="black"; } 
        
        function lol(bla) {
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderLeftColor=="black")document.getElementById(blubb).style.borderLeftColor = "silver";
            else document.getElementById(blubb).style.borderLeftColor="black"; } 
       
        function rechts(bla) {
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderRightColor=="black")document.getElementById(blubb).style.borderRightColor = "silver";
            else document.getElementById(blubb).style.borderRightColor="black"; } 
            
        function unten(bla) {
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderBottomColor=="black")document.getElementById(blubb).style.borderBottomColor = "silver";
            else document.getElementById(blubb).style.borderBottomColor="black"; }
     
        -->
        </script>
    </head>
    <body onload="hello()">
    <div id="rahmen"> <!-- Hier nur zwei Kästchen, es können aber beliebig viele sein.-->
    <div class="karo"><div class="oben" onclick="oben(this);"></div><div class="links" onclick="lol(this);"></div><div class="rechts" onclick="rechts(this);"></div><div class="unten" onclick="unten(this);"></div></div>
    <div class="karo"><div class="oben" onclick="oben(this);"></div><div class="links" onclick="lol(this);"></div><div class="rechts" onclick="rechts(this);"></div><div class="unten" onclick="unten(this);"></div></div>
    </div>   
</body>
<html>

Ihr könnt es ja mal kurz im Browser anzeigen lassen, um das Ergebnis zu sehen.
Da es aber sehr mühsam ist, jeden Rand einzeln anzuklicken, möchte ich eine Art Kombination von onmouseover und button oder shiftKey events benutzen, um mit gedrückt gehaltener Maus/Shift-Taste Linien zeichnen zu können.
Ich habe dafür eine Art Demo gemacht, folgende:
Fiddle- Edit Fiddle

HTML:

<html>
<head>
<title>shiftKey example</title>

<script type="text/javascript">

function showChar(e){
 if(e.shiftKey==true) { alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"    /* Einfach um mögliche andere Events/Steuerungen zu testen */
    + "charCode: " + e.charCode + "\n"
    + "SHIFT key pressed: " + e.shiftKey + "\n"
    + "ALT key pressed: " + e.altKey + "\n"
    + "MouseButton pressed:" + e.button + "\n"
     + "MouseButtonS pressed:" + e.buttons + "\n"
  );
}}

</script>
</head>

<body>
<p onmouseover="showChar(event);">Wenn man Shift gedrückt hält und mit der Maus rüberstreicht, kommen gaaanz viele alerts()...</p>
</body>
</html>

Ich habe dann versucht das zu kombinieren, bin aber gescheitert

Hier ist mein Versuch:

HTML:

  <script>
        <!--
       function omg(hai) {
       if (hai.shiftKey===true){oben(this);}
       }
       
       
        function hello() {
            var kaestchen = document.getElementsByClassName('karo');
            for (var i=0; i<100000; i++) {
            kaestchen[i].id="k"+String(i);
                }
            }
      
        function oben(bla) {
        
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderTopColor=="black")document.getElementById(blubb).style.borderTopColor = "silver";
            else document.getElementById(blubb).style.borderTopColor="black"; }
        
        function lol(bla) {
                
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderLeftColor=="black")document.getElementById(blubb).style.borderLeftColor = "silver";
            else document.getElementById(blubb).style.borderLeftColor="black"; } 
       
        function rechts(bla) {
                
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderRightColor=="black")document.getElementById(blubb).style.borderRightColor = "silver";
            else document.getElementById(blubb).style.borderRightColor="black"; } 
            
        function unten(bla) {
                
            var blubb = bla.parentNode.getAttribute('id');
            if (document.getElementById(blubb).style.borderBottomColor=="black")document.getElementById(blubb).style.borderBottomColor = "silver";
            else document.getElementById(blubb).style.borderBottomColor="black"; }
     
        -->
        </script>
    </head>
    <body onload="hello()">
    <div id="rahmen">
    <div class="karo"><div class="oben" onmouseover="omg(event);"></div><div class="links" onmouseover="lol(this);"></div><div class="rechts" onmouseover="rechts(this);"></div><div class="unten" onmouseover="unten(this);"></div></div> 
    <div class="karo"><div class="oben" onmouseover="omg(event);"></div><div class="links" onmouseover="lol(this);"></div><div class="rechts" onmouseover="rechts(this);"></div><div class="unten" onmouseover="unten(this);"></div></div>

Demo nur bei oben() eingebunden, daher funktioniert nur der obere Rand (Nicht).
Edit fiddle - JSFiddle
Der Fehler liegt darin, dass wenn er den shift key erkennt- das funktioniert - das Parent element nicht mehr finden kann.
Hat irgendeiner eine Idee wie man das richtig machen könnte? (Ich bin noch ein ziemlicher Js Anfänger

)

TecEye · 21. Dez. 2014

bitte fiddle machen

Kinkelin · 21. Dez. 2014

TecEye schrieb:
bitte fiddle machen

Das kannte ich noch gar nicht. Ich habe es mal gegoogelt, das ist ganz schön praktisch

Ich habe es jetzt mal eingebunden, ich hoffe damit stimmt alles.

Kinkelin · 23. Dez. 2014

Ich habe es jetzt selber gelöst, mit einer neuen Funktion, die immer vor der anderen abgespielt wird, und die id in eine globale variable einspeichert. So umgehe ich das Problem, dass ich nicht oben(event+this) haben müsste.

[FRAGE] Karos bemalen (wie bei Käsekästchen)

Kinkelin

New member

TecEye

New member

Kinkelin

New member

Kinkelin

New member