ubuntuusers.de

via DuckDuckGo

Kann Fehler in Javascript-Code nicht finden

Status: Ungelöst | Ubuntu-Version: Ubuntu 20.04 (Focal Fossa)
Antworten |

whocares02

Anmeldungsdatum:
11. Januar 2013

Beiträge: 454
Zitieren
9. Juni 2023 07:47 (zuletzt bearbeitet: 9. Juni 2023 10:24)

Hallo Forum,

ich möchte eine html-Seite mit Themen-Suchmaschinen machen. Dazu habe ich folgenden Code:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
  </head>
  <body>
    <table style="width: 100%" border="1">
      <tbody>
        <tr>
          <td>
			 <h1>Freeware-Sites:</h1>
			 <br>
            <form action="https://duckduckgo.com/" method="get" id="freewaresites" target="_blank">
              <input name="q" id="suchfeld" type="text">
              <button type="button" id="search">Suchen</button>
              <ul style="list-style-type: none;">     
                <li><label><input name="sites" value="filehorse.com" checked="checked" type="checkbox">Filehorse.com</label></li>
                <li><label><input name="sites" value="filehippo.com" checked="checked" type="checkbox">Filehippo.com</label></li>
                <li><label><input name="sites" value="oldversion.com" checked="checked" type="checkbox">OldVersion.com</label></li>
              </ul>
            </form>
          </td>
          <td>
			<h1>3D-Printing-Sites:</h1>
			<br>
            <form action="https://duckduckgo.com/" method="get" id="3dprintingsites" target="_blank">
              <input name="q" id="suchfeld2" type="text">
              <button type="button" id="search2">Suchen</button>
              <ul>
                <li><label><input name="sites" value="thingiverse.com" checked="checked" type="checkbox">Thingiverse.com</label></li>
                <li><label><input name="sites" value="cults3d.com" checked="checked" type="checkbox">Cults3D.com</label></li>
                <li><label><input name="sites" value="myminifactory.com" checked="checked" type="checkbox">myminifactory.com</label></li>
                <li><label><input name="sites" value="cgtrader.com" checked="checked" type="checkbox">cgtrader.com</label></li>
                <li><label><input name="sites" value="pinshape.com" checked="checked" type="checkbox">pinshape.com</label></li>
                <li><label><input name="sites" value="youmagine.com" checked="checked" type="checkbox">youmagine.com</label></li>
                <li><label><input name="sites" value="3dexport.com" checked="checked" type="checkbox">3dexport.com</label></li>
              </ul>
            </form>
          </td>        
        </tr>
      </tbody>
    </table>
    <br>
    <script type="text/javascript">
		
	
	<!-- Erstes Suchfeld -->
	
      document.getElementById('search').onclick = function() {
        var q = document.getElementById("suchfeld").value;
        var sites = document.querySelectorAll('#freewaresites input[name="sites"]:checked');
        var siteStr = '';
        for (var i = 0; i < sites.length; i++) {
          siteStr += ' OR site:' + sites[i].value;
        }
        siteStr = siteStr.substr(4);
        window.open('https://duckduckgo.com/?q=' + encodeURIComponent(q + ' ' + siteStr), '_blank');
      };
   
      document.getElementById('suchfeld').addEventListener('keyup', function(event) {
        if (event.keyCode === 13) {
          event.preventDefault();
          document.getElementById('search').click();
        }
      });

      document.getElementById('freewaresites').addEventListener('submit', function(event) {
        event.preventDefault();
        var q = document.getElementById("suchfeld").value;
        var sites = document.querySelectorAll('#freewaresites input[name="sites"]:checked');
        var siteStr = '';
        for (var i = 0; i < sites.length; i++) {
          siteStr += ' OR site:' + sites[i].value;
        }
        siteStr = siteStr.substr(4);
        window.open('https://duckduckgo.com/?q=' + encodeURIComponent(q + ' ' + siteStr), '_blank');
      });

	  <!-- Zweites Suchfeld -->
	  
     document.getElementById('search2').onclick = function() {
		var q = document.getElementById("suchfeld2").value;
		var sites = document.querySelectorAll('#3dprintingsites input[name="sites"]:checked');
		var siteStr = '';
		for (var i = 0; i < sites.length; i++) {
		  siteStr += ' OR site:' + sites[i].value;
		}
		siteStr = siteStr.substr(4);
		window.open('https://duckduckgo.com/?q=' + encodeURIComponent(q + ' ' + siteStr), '_blank');
	};
   
      document.getElementById('suchfeld2').addEventListener('keyup', function(event) {
        if (event.keyCode === 13) {
          event.preventDefault();
          document.getElementById('search2').click();
        }
      });

      document.getElementById('3dprintingsites').addEventListener('submit', function(event) {
        event.preventDefault();
        var q = document.getElementById("suchfeld2").value;
        var sites = document.querySelectorAll('#3dprintingsites input[name="sites"]:checked');
        var siteStr = '';
        for (var i = 0; i < sites.length; i++) {
          siteStr += ' OR site:' + sites[i].value;
        }
        siteStr = siteStr.substr(4);
        window.open('https://duckduckgo.com/?q=' + encodeURIComponent(q + ' ' + siteStr), '_blank');
      });     
     
	
    </script>
  </body>
</html>

Wie man leicht sehen kann, soll man die Seiten anhaken können, die man durchsuchen möchte, dann tippt man den Suchbegriff ein und startet mit Enter oder Button-Klick. Ein neuer Tab soll sich öffnen und Duckduckgo durchsucht NUR die ausgewählten Seiten.

Aus irgendeinem Grund funktioniert das erste Suchfeld ohne Probleme und das zweite Suchfeld überhaupt nicht. Dabei sind die Funktionen für beide Felder fast identisch. Sieht jemand den Fehler?

Bearbeitet von rklm:

Syntaxhighlighting. Bitte beachte Forum/Syntax und nutze die Vorschaufunktion!

sh4711

Anmeldungsdatum:
13. Februar 2011

Beiträge: 1158
Zitieren
9. Juni 2023 23:05

ersetze in Zeile 27 3dprintingsites durch dreidprintingsites
und
ersetze in Zeile 84 #3dprintingsites durch #dreidprintingsites

Grundsätzlich sollte man Bezeichner in Programmiersprachen nicht mit einer Zahl beginnen (gibt sicher auch Ausnahmen).
Siehe hierzu type-id in html4
🙄 in html5 geht das anscheinend doch ?!? Siehe https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute

... IDs can consist of just digits, start with a digit, ...

?!?

Wenn du den Wald vor lauter Bäumen nicht siehst, dann bau dir einfach ein paar alerts rein damit du die Zeile findest an der es hakt.
Beispiel (es hakt hinter 2): 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
document.getElementById('search2').onclick = function() {
alert('1');
		var q = document.getElementById("suchfeld2").value;
alert('2');
		var sites = document.querySelectorAll('#3dprintingsites input[name="sites"]:checked');
alert('3');
		var siteStr = '';
		for (var i = 0; i < sites.length; i++) {
		  siteStr += ' OR site:' + sites[i].value;
		}
		siteStr = siteStr.substr(4);
		window.open('https://duckduckgo.com/?q=' + encodeURIComponent(q + ' ' + siteStr), '_blank');
	};

whocares02

(Themenstarter)

Anmeldungsdatum:
11. Januar 2013

Beiträge: 454
Zitieren
11. Juni 2023 13:43

Danke! Das war's.

sh4711

Anmeldungsdatum:
13. Februar 2011

Beiträge: 1158
Zitieren
11. Juni 2023 14:31

whocares02 schrieb:

Danke! Das war's.

👍
Wenn es das war, dann markiere das Thema bitte noch kurz als gelöst ... Danke 😀

Marc_BlackJack_Rintsch Team-Icon

Ehemalige
Avatar von Marc_BlackJack_Rintsch

Anmeldungsdatum:
16. Juni 2006

Beiträge: 4673

Wohnort: Berlin
Zitieren
1. November 2023 21:48

@whocares02: Der Code ist teilweise recht komisch. Das klicken des Buttons hat den gleichen Code wie das 'submit'-Ereignis. Und bei der Eingabetaste im Suchfeld wird das Default-Verhalten (= submit) verhindert, um dann bloss programmatisch den Button zu klicken, der letztlich ja das selbe wie das 'submit'-Ereignis macht‽ Und statt Code auf das 'click'-Ereignis zu lauschen der dann das gleiche wie der kopierte Code macht, der auf das 'submit' vom <form> zu lauschen, könnte man da einfach einen Submit-Button verwenden. Und sich zwei Listener und (teilweise kopierten) Code sparen. Und auch die eindeutige id für den Button.

<form> braucht nichts ausser id weil die ganzen anderen Attribute ja nie verwendet werden, da das alles im 'submit'-Listener gemacht wird.

Und eigentlich brauchen auch nur die Formulare eine id. Das Eingabefeld für die Suche kann man über das Form ja anhand des Namens q ermitteln.

Das Zusammenbasteln mit ' OR site:' und am Ende vier Zeichen wieder entfernen ist unübersichtlich und fehleranfällig. Man würde da eher die einzelnen Komponenten in einem Array sammeln und das dann mit join() zusammenfügen.

Wenn man die Gemeinsamkeiten im Programm für die beiden Formulare in eine Funktion herauszieht, dann landet man bei so etwas: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
  </head>
  <body>
    <table style="width: 100%" border="1">
      <tbody>
        <tr>
          <td>
            <h1>Freeware-Sites:</h1>
            <br>
            <form action="https://duckduckgo.com/" method="get" id="freewaresites" target="_blank">
              <input name="q" type="text">
              <button type="submit" id="search">Suchen</button>
              <ul style="list-style-type: none;">     
                <li>
                  <label><input name="sites" value="filehorse.com" checked="checked" type="checkbox">Filehorse.com</label>
                </li>
                <li>
                  <label><input name="sites" value="filehippo.com" checked="checked" type="checkbox">Filehippo.com</label>
                </li>
                <li>
                  <label><input name="sites" value="oldversion.com" checked="checked" type="checkbox">OldVersion.com</label>
                </li>
              </ul>
            </form>
          </td>
          <td>
            <h1>3D-Printing-Sites:</h1>
            <br>
            <form id="_3dprintingsites">
              <input name="q" type="text">
              <button type="submit">Suchen</button>
              <ul style="list-style-type: none;">
                <li>
                  <label><input name="sites" value="thingiverse.com" checked="checked" type="checkbox">Thingiverse.com</label>
                </li>
                <li>
                  <label><input name="sites" value="cults3d.com" checked="checked" type="checkbox">Cults3D.com</label>
                </li>
                <li>
                  <label><input name="sites" value="myminifactory.com" checked="checked" type="checkbox">myminifactory.com</label>
                </li>
                <li>
                  <label><input name="sites" value="cgtrader.com" checked="checked" type="checkbox">cgtrader.com</label>
                </li>
                <li>
                  <label><input name="sites" value="pinshape.com" checked="checked" type="checkbox">pinshape.com</label>
                </li>
                <li>
                  <label><input name="sites" value="youmagine.com" checked="checked" type="checkbox">youmagine.com</label>
                </li>
                <li>
                  <label><input name="sites" value="3dexport.com" checked="checked" type="checkbox">3dexport.com</label>
                </li>
              </ul>
            </form>
          </td>        
        </tr>
      </tbody>
    </table>
    <script type="text/javascript">
      function addSubmitHandler (formElement) {
        formElement.addEventListener('submit', function (event) {
          event.preventDefault();
          const query = formElement.querySelector('[name=q]').value;
          const sites = Array.from(
            formElement.querySelectorAll('[name=sites]:checked'),
            (checkbox) => `site:${checkbox.value}`
          ).join(' OR ');
          window.open(
            'https://duckduckgo.com/?q=' + encodeURIComponent(`${query} ${sites}`),
            '_blank'
          );
        });
      }

      for (let id of ['freewaresites', '_3dprintingsites']) {
        addSubmitHandler(document.getElementById(id));
      }
    </script>
  </body>
</html>

Im HTML in den Formularen steckt ja auch noch mal Redundanz, die man eigentlich auch beseitigen könnte. Bleibt als Aufgabe für den Leser. 😎
Antworten |