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>