tag:forum.selfhtml.org,2005:/self Ausgabe wird zu oft getätigt – SELFHTML-Forum 2019-07-26T16:16:08Z https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753656#m1753656 af2111 2019-07-20T18:48:07Z 2019-07-20T20:30:15Z Ausgabe wird zu oft getätigt <p>Hallo,</p> <p>ich möchte eine Seite machen, die dir anhand der Temperatur vorschlägt, was man anziehen soll wenn man rausgeht. Dafür benutze ich eine Api von OpenWeather. Mein Problem ist, dass die Ausgabe nicht nur einmal, sondern pro Abfrage einmal geschrieben werden. <a href="/images/783ffd90-ab1e-11e9-894a-b42e9947ef30.PNG" rel="noopener noreferrer"><img src="/images/783ffd90-ab1e-11e9-894a-b42e9947ef30.PNG?size=medium" alt="Ein Screenshot zur Verdeutlichung des Problems" title="Screenshot" loading="lazy"></a> Deshalb wollte ich fragen, ob sich jemand mit der API auskennt und mir helfen kann. Hier ist der Code:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Weather Application<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter City Name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-btn<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fas fa-search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city-icon-holder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temperature<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>humidity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>humidity-div<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>output<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>out<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>https://use.fontawesome.com/releases/v5.0.13/js/all.js<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript"><span class="token keyword">const</span> appKey <span class="token operator">=</span> <span class="token string">"*****"</span><span class="token punctuation">;</span> <span class="token keyword">let</span> searchButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"search-btn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> searchInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"search-txt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> cityName <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"city-name"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> icon <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"icon"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> temperature <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"temp"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> humidity <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"humidity-div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> output <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"out"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> outputHolder <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> searchButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> findWeatherDetails<span class="token punctuation">)</span><span class="token punctuation">;</span> searchInput<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keyup"</span><span class="token punctuation">,</span> enterPressed<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">enterPressed</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">"Enter"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">findWeatherDetails</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">findWeatherDetails</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>searchInput<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> searchLink <span class="token operator">=</span> <span class="token string">"https://api.openweathermap.org/data/2.5/weather?q="</span> <span class="token operator">+</span> searchInput<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">"&appid="</span><span class="token operator">+</span>appKey<span class="token punctuation">;</span> <span class="token function">httpRequestAsync</span><span class="token punctuation">(</span>searchLink<span class="token punctuation">,</span> theResponse<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">theResponse</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> jsonObject <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span> cityName<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> jsonObject<span class="token punctuation">.</span>name<span class="token punctuation">;</span> icon<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">"http://openweathermap.org/img/w/"</span> <span class="token operator">+</span> jsonObject<span class="token punctuation">.</span>weather<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>icon <span class="token operator">+</span> <span class="token string">".png"</span><span class="token punctuation">;</span> temperature<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">.</span>main<span class="token punctuation">.</span>temp <span class="token operator">-</span> <span class="token number">273</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"°"</span><span class="token punctuation">;</span> humidity<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> jsonObject<span class="token punctuation">.</span>main<span class="token punctuation">.</span>humidity <span class="token operator">+</span> <span class="token string">"%"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> celcius <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">.</span>main<span class="token punctuation">.</span>temp<span class="token punctuation">)</span><span class="token operator">-</span><span class="token number">273.15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span> <span class="token punctuation">(</span>celcius<span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>celcius <span class="token operator"><=</span> <span class="token number">23</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#8181F7'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">"#d6f286"</span><span class="token punctuation">;</span> <span class="token function">jQuery</span><span class="token punctuation">(</span><span class="token string">"div#out"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prepend</span><span class="token punctuation">(</span><span class="token string">"<p id=\"outputPara\">Zieh dir eine Jacke an!</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>celcius <span class="token operator">>=</span> <span class="token number">24</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFBF00'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">"#00d8ff"</span><span class="token punctuation">;</span> <span class="token function">jQuery</span><span class="token punctuation">(</span><span class="token string">"div#out"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prepend</span><span class="token punctuation">(</span><span class="token string">"<p id=\"outputPara\">Zieh dir ein kurzärmliges T-Shirt an!</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">httpRequestAsync</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temperature<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> httpRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> httpRequest<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>httpRequest<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token operator">&&</span> httpRequest<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token function">callback</span><span class="token punctuation">(</span>httpRequest<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> httpRequest<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true for asynchronous </span> httpRequest<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753658#m1753658 Rolf B 2019-07-20T20:23:31Z 2019-07-20T20:24:13Z Ausgabe wird zu oft getätigt <p>Hallo af2111,</p> <p>das liegt nicht an der API, sondern an Dir. Computer tun nie, was sie sollen. Immer nur das, was man ihnen sagt. Und deiner tut das, was Du ihm gesagt hast: prepend. Häng vor das, was schon da ist, vorne was an.</p> <p>Was Du möchtest, ist: Schmeiß weg was da ist und nimm was neues. Du könntest prepend durch html ersetzen:</p> <pre><code class="block bad language-js"><span class="token function">jQuery</span><span class="token punctuation">(</span><span class="token string">"div#out"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">"<p id=\"outputPara\">Zieh dir eine Jacke an!</p>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Aber: tu's nicht. Du hast das div mit id=out bereits in einer Variablen stehen. Das kannst Du viel einfacher verwenden:</p> <pre><code class="block good language-js">output<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"<p id=\"outputPara\">Zieh dir eine Jacke an!</p>"</span> </code></pre> <p>Wobei man sich fragen sollte, ob diese divitis nötig ist (eine gefährliche und ansteckende Krankeit!), aber ich kenne dein style.css nicht und weiß nicht, was Du da alles tust. Wenn Du immer ein <p> Element einsetzt, dann sollte dein div#out bereits ein p#out sein und du setzt nur den textContent. Falls Du den Inhalt mit Markup versehen willst, setzt Du innerHTML.</p> <p>Die Funktion <code>httpRequestAsync</code> kannst Du Dir übrigens schenken. Nimm $.getJSON von jQuery, der erledigt auch gleich den JSON.parse mit. Oder nimm fetch, dann kannst Du jQuery ganz rausschmeißen.</p> <p><a href="https://jsfiddle.net/uhya2kp0" rel="noopener noreferrer">Fiddle mit Beispiel für $.getJSON und fetch</a>. Deinen API-Key habe ich darin durch *** ersetzt, den solltest Du nicht rumposten.</p> <p>Das hier:</p> <pre><code class="block bad language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>celcius <span class="token operator"><=</span> <span class="token number">23</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>celcius <span class="token operator">>=</span> <span class="token number">24</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre> <p>ist übrigens auch nur nötig, wenn Du mehr als 2 Stufen baust. Bei nur 2 Stufen reicht statt des else if einfach nur ein else. Der zweite if ist konzeptionell falsch, weil Du damit eine Lücke in der Logik hat: Was ist mit Temperaturwerten zwischen 23 und 24? Ich weiß schon, du rundest und bist hier sicher, aber wenn ein einfacher else reicht, macht man keine neue Bedingung. Und wenn, dann trennscharf mit <code>celsius > 23</code>. Jede Lücke ist eine zuviel.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753666#m1753666 af2111 2019-07-21T09:55:31Z 2019-07-21T09:55:31Z Ausgabe wird zu oft getätigt <p>Danke für die Antwort, das hat das Problem gelöst. Zur Divitis: Die hat schon ihren Grund, der aktuelle Code ist nochmal da.</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Weather Application<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter City Name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-btn<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fas fa-search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city-icon-holder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temperature<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>humidity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>humidity-div<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>WeatherDesc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>WeatherDescOut<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>output<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>out<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>https://use.fontawesome.com/releases/v5.0.13/js/all.js<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript"><span class="token keyword">const</span> appKey <span class="token operator">=</span> <span class="token string">"*********"</span><span class="token punctuation">;</span> <span class="token keyword">let</span> searchButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"search-btn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> searchInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"search-txt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> cityName <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"city-name"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> icon <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"icon"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> temperature <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"temp"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> humidity <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"humidity-div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> weatherDesc <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"WeatherDesc"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> weatherDescOut <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"WeatherDescOut"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> output <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"out"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> outputHolder <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> searchButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> findWeatherDetails<span class="token punctuation">)</span><span class="token punctuation">;</span> searchInput<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keyup"</span><span class="token punctuation">,</span> enterPressed<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">enterPressed</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">"Enter"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">findWeatherDetails</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">findWeatherDetails</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>searchInput<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> searchLink <span class="token operator">=</span> <span class="token string">"https://api.openweathermap.org/data/2.5/weather?q="</span> <span class="token operator">+</span> searchInput<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">"&appid="</span><span class="token operator">+</span>appKey<span class="token punctuation">;</span> <span class="token function">httpRequestAsync</span><span class="token punctuation">(</span>searchLink<span class="token punctuation">,</span> theResponse<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">theResponse</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> jsonObject <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span> cityName<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> jsonObject<span class="token punctuation">.</span>name<span class="token punctuation">;</span> icon<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">"http://openweathermap.org/img/w/"</span> <span class="token operator">+</span> jsonObject<span class="token punctuation">.</span>weather<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>icon <span class="token operator">+</span> <span class="token string">".png"</span><span class="token punctuation">;</span> temperature<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">.</span>main<span class="token punctuation">.</span>temp <span class="token operator">-</span> <span class="token number">273</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"°"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">.</span>weather<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>description<span class="token punctuation">)</span><span class="token punctuation">;</span> humidity<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> jsonObject<span class="token punctuation">.</span>main<span class="token punctuation">.</span>humidity <span class="token operator">+</span> <span class="token string">"%"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> celcius <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">.</span>main<span class="token punctuation">.</span>temp<span class="token punctuation">)</span><span class="token operator">-</span><span class="token number">273.15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span> <span class="token punctuation">(</span>celcius<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>celcius <span class="token operator"><</span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#8181F7'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">"#d6f286"</span><span class="token punctuation">;</span> output<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Zieh dir eine dicke Jacke an!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>celcius <span class="token operator"><</span> <span class="token number">23</span> <span class="token operator">&&</span> celcius <span class="token operator">></span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#8181F7'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">"#d6f286"</span><span class="token punctuation">;</span> output<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Zieh dir ein langärmliges T-Shirt an!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>celcius <span class="token operator">></span> <span class="token number">23</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#FFBF00'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">"#00d8ff"</span><span class="token punctuation">;</span> output<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Zieh dir ein kurzärmliges T-Shirt an!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">.</span>weather<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>description <span class="token operator">==</span> <span class="token string">"clear sky"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> weatherDescOut<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Klarer Himmel"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>jsonObject<span class="token punctuation">.</span>weather<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>description <span class="token operator">==</span> <span class="token string">"scattered clouds"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> weatherDescOut<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Vereinzelt Wolken"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">httpRequestAsync</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temperature<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> httpRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> httpRequest<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>httpRequest<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token operator">&&</span> httpRequest<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token function">callback</span><span class="token punctuation">(</span>httpRequest<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> httpRequest<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true for asynchronous </span> httpRequest<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-css"><span class="token selector">body</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>25vh auto<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 20px 40px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.3<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token selector">.header</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #FF9800<span class="token punctuation">;</span> <span class="token property">border-top-left-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 90px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#output</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 236<span class="token punctuation">,</span> 59<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Courier New"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#WeatherDesc</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>109<span class="token punctuation">,</span> 214<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.979<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 90px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Courier New"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#WeatherDescOut</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token selector">#temp, #humidity-div</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Courier New"</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.city-icon-holder</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#city-name</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Courier New"</span><span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#icon</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#main</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.city-icon</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #FFC107<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.temperature</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>0%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #9C27B0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.humidity</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>40%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #E91E63<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#search-btn</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#search-txt</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>30px<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.search</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span><span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Tschö, af2111</p> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753667#m1753667 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-07-21T12:42:31Z 2019-07-21T12:42:31Z Ausgabe wird zu oft getätigt <p>Hallo af2111,</p> <blockquote> <p>Zur Divitis: Die hat schon ihren Grund,</p> </blockquote> <p>einen Grund vielleicht, eine Berechtigung nicht.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753670#m1753670 Rolf B 2019-07-21T21:11:56Z 2019-07-21T21:11:56Z Ausgabe wird zu oft getätigt <p>Hallo af2111,</p> <p>jetzt bin ich selbst schuld, ich hab deinen API-Key rausgelöscht und die Historie entfernen lassen, um den Key zu schützen, und nun kann ich mangels Key nicht testen </p> <p>Deine Divitis muss überhaupt nicht sein, und deine absolute Positionierei schon gar nicht. Es gibt heutzutage wesentlich elegantere Wege, um Boxen zu positionieren und Inhalte zu zentrieren.</p> <p>In deinem Fall solltest Du display:grid für das Gesamtlayout verwenden. Für horizontales Zentrieren reicht zumeist <code>text-align: center</code> und mit etwas Padding bekommt man die Werte auch vertikal zentriert dargestellt.</p> <p>Und dein Input für die Stadt braucht ein Label. Ein Placeholder ist kein Label. Du kannst das Label visuell verstecken, so dass ein sehender Mensch den Placeholder sieht. Aber das Label ist dann für Leute da, die nicht sehen können.</p> <p><a href="https://jsfiddle.net/Rolf_b/Lob4pqu7/" rel="noopener noreferrer">Beispiel-Fiddle</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753852#m1753852 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-26T07:05:54Z 2019-07-26T07:05:54Z Ausgabe wird zu oft getätigt <p>@@af2111</p> <blockquote> <p>Zur Divitis: Die hat schon ihren Grund</p> </blockquote> <p><a href="https://forum.selfhtml.org/cites/1122" rel="noopener noreferrer">Bedauerlich.</a></p> <hr> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> ⋮ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Weather Application<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> ⋮ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter City Name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-javascript"> output<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Zieh dir eine dicke Jacke an!"</span><span class="token punctuation">;</span> ⋮ output<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Zieh dir ein langärmliges T-Shirt an!"</span><span class="token punctuation">;</span> ⋮ output<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Zieh dir ein kurzärmliges T-Shirt an!"</span><span class="token punctuation">;</span> ⋮ weatherDescOut<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Klarer Himmel"</span><span class="token punctuation">;</span> ⋮ weatherDescOut<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">"Vereinzelt Wolken"</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Ich bin verwirrt. Soll die Anwendung nun englisch oder deutsch sein?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753856#m1753856 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-26T07:22:32Z 2019-07-26T07:22:32Z Ausgabe wird zu oft getätigt <p>@@Rolf B</p> <blockquote> <p>Und dein Input für die Stadt braucht ein Label. Ein Placeholder ist kein Label.</p> </blockquote> <p>So ist es.</p> <blockquote> <p>Du kannst das Label visuell verstecken, so dass ein sehender Mensch den Placeholder sieht. Aber das Label ist dann für Leute da, die nicht sehen können.</p> </blockquote> <p>Nicht die beste Idee. Entweder das Feld braucht eine sichtbare Beschriftung – dann als Label – oder es braucht keine – dann das Label visuell verstecken. Ein Placeholder ist kein Ersatz für Label – auch für Sehende nicht.</p> <blockquote> <blockquote> <pre><code class="block bad language-HTML"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter City Name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-btn<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fas fa-search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> </blockquote> </blockquote> <p>Außerdem braucht das Formular (warum ist das kein <code>form</code>?) einen Button. Ein Link ist kein Button. <code>href="#"</code> ist ein deutliches Zeichen für den Missbrauch das <code>a</code>-Elements.</p> <p>Und der Button braucht natürlich auch eine Beschriftung.</p> <p>Das Markup sollte so aussehen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>City:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Beachte <code>role="search"</code> und <code>type="search"</code>!</p> <p>Label und Button können ggfs. visuell versteckt werden.</p> <p>Ohne JavaScript wird das Formular abgesendet und kann serverseitig ausgewertet werden.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753859#m1753859 JürgenB https://www.j-berkemeier.de 2019-07-26T07:44:51Z 2019-07-26T07:44:51Z Ausgabe wird zu oft getätigt <p>Hallo Gunnar,</p> <p>wenn Formularelemente nur als Dialogelemente für Javascripte dienen und keine put/get-Requests auslösen, soll man dann ein form drum rum setzen? Technisch braucht man es ja nicht.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753887#m1753887 MudGuard http://www.andreas-waechter.de/ 2019-07-26T09:55:19Z 2019-07-26T09:55:19Z Ausgabe wird zu oft getätigt <p>Hi,</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>City:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search-txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Beachte <code>role="search"</code> und <code>type="search"</code>!</p> </blockquote> <p>Kann das role="search" nicht ins form? Und das div dann ins /dev/null?</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753868#m1753868 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-26T08:39:43Z 2019-07-26T08:39:43Z Ausgabe wird zu oft getätigt <p>@@JürgenB</p> <blockquote> <p>wenn Formularelemente nur als Dialogelemente für Javascripte dienen und keine put/get-Requests auslösen, soll man dann ein form drum rum setzen?</p> </blockquote> <p>Warum sollte die Suche nur mit JavaScript funktionieren?</p> <p>Und auch bei Anwendungen, die nur mit JavaScript funktionieren können, dürften Nutzer assistiver Technologien davon profitieren, wenn ein Formular auch als solches angezeigt/angesagt wird.</p> <p>Allerdings: in diesem speziellen Fall innerhalb des <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> vermutlich nicht.</p> <p>Aber auch ohne <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span></code> muss das UI-Element zum Auslösen der Interaktion ein <code class="good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span></code> sein; kein <code class="bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753921#m1753921 kai345 2019-07-26T16:16:08Z 2019-07-26T16:16:08Z Ausgabe wird zu oft getätigt <blockquote> <p>wenn Formularelemente nur als Dialogelemente für Javascripte dienen und keine put/get-Requests auslösen, soll man dann ein form drum rum setzen? Technisch braucht man es ja nicht.</p> </blockquote> <p>Ich mache das meist so. Durch ein Formular hat man automatisch alle Referenzen in der "<a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/forms/elements" rel="nofollow noopener noreferrer">elements</a>"-collection zum Lesen/Manipulieren der einzelnen Formular-Elemente</p> <p>/k</p> <div class="signature">-- <br> Stur lächeln und winken, Männer! </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753870#m1753870 JürgenB https://www.j-berkemeier.de 2019-07-26T08:43:59Z 2019-07-26T08:43:59Z Ausgabe wird zu oft getätigt <p>Hallo Gunnar,</p> <blockquote> <p>Und auch bei Anwendungen, die nur mit JavaScript funktionieren können, dürften Nutzer assistiver Technologien davon profitieren, wenn ein Formular auch als solches angezeigt/angesagt wird.</p> </blockquote> <p>d.h. du würdest auch <a href="http://test.j-berkemeier.de/Energiekostenrechner.html" rel="nofollow noopener noreferrer">in diesem Fall</a> die Formularelemente in ein form einschließen?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753892#m1753892 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-26T11:04:11Z 2019-07-26T11:04:11Z Ausgabe wird zu oft getätigt <p>@@MudGuard</p> <blockquote> <p>Kann das role="search" nicht ins form?</p> </blockquote> <p>Nein, dann hätte das <code>form</code>-Element ja nicht mehr die Rolle „Formular“.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753894#m1753894 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-07-26T11:17:56Z 2019-07-26T11:17:56Z Ausgabe wird zu oft getätigt <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p>Kann das role="search" nicht ins form?</p> </blockquote> <p>Nein, dann hätte das <code>form</code>-Element ja nicht mehr die Rolle „Formular“.</p> </blockquote> <p><em lang="en">For search facilities, authors SHOULD use the search role and not the generic form role.</em> (<a href="https://www.w3.org/WAI/PF/aria/roles#form" rel="nofollow noopener noreferrer">https://www.w3.org/WAI/PF/aria/roles#form</a>)</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/jul/20/ausgabe-wird-zu-oft-getatigt/1753907#m1753907 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-07-26T13:03:02Z 2019-07-26T13:03:02Z Ausgabe wird zu oft getätigt <p>@@Matthias Apsel</p> <blockquote> <blockquote> <blockquote> <p>Kann das role="search" nicht ins form?</p> </blockquote> <p>Nein, dann hätte das <code>form</code>-Element ja nicht mehr die Rolle „Formular“.</p> </blockquote> <p><em lang="en">For search facilities, authors SHOULD use the search role and not the generic form role.</em> (<a href="https://www.w3.org/WAI/PF/aria/roles#form" rel="nofollow noopener noreferrer">https://www.w3.org/WAI/PF/aria/roles#form</a>)</p> </blockquote> <p>Ich bilde mir ein, das anders gelesen zu haben, nämlich mit <code>role="search"</code>-Element ums Formular drumrum.</p> <p>Ich werde mich jetzt aber nicht auf die Suche nach einer Quelle machen. Es sei denn, nach einer Wasserquelle.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div>