Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace usage of alert() #7560

Merged
merged 1 commit into from
Aug 3, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ <h3 id="The_this_problem">The "this" problem</h3>

<pre class="brush: js">const myArray = ['zero', 'one', 'two'];
myArray.myMethod = function (sProperty) {
alert(arguments.length &gt; 0 ? this[sProperty] : this);
console.log(arguments.length &gt; 0 ? this[sProperty] : this);
};

myArray.myMethod(); // prints "zero,one,two"
Expand Down Expand Up @@ -153,12 +153,12 @@ <h3 id="Passing_string_literals">Passing string literals</h3>
</p>

<pre class="brush: js example-bad">// Don't do this
setTimeout("alert('Hello World!');", 500);
setTimeout("console.log('Hello World!');", 500);
</pre>

<pre class="brush: js example-good">// Do this instead
setTimeout(function() {
alert('Hello World!');
console.log('Hello World!');
}, 500);
</pre>

Expand Down Expand Up @@ -303,30 +303,43 @@ <h3 id="setting_and_clearing_timeouts">Setting and clearing timeouts</h3>

<p>The following example sets up two simple buttons in a web page and hooks them to the
<code>setTimeout()</code> and <code>clearTimeout()</code> routines. Pressing the first
button will set a timeout which calls an alert dialog after two seconds and stores the
button will set a timeout which shows a message after two seconds and stores the
timeout id for use by <code>clearTimeout()</code>. You may optionally cancel this
timeout by pressing on the second button.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">
&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
&lt;button onclick="delayedMessage();"&gt;Show an message after two seconds&lt;/button&gt;
&lt;button onclick="clearMessage();"&gt;Cancel message before it happens&lt;/button&gt;

&lt;div id="output"&gt;&lt;/div&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">let timeoutID;

function delayedAlert() {
timeoutID = setTimeout(window.alert, 2*1000, 'That was really slow!');
function setOutput(outputContent) {
document.querySelector('#output').textContent = outputContent;
}

function delayedMessage() {
setOutput('');
timeoutID = setTimeout(setOutput, 2*1000, 'That was really slow!');
}

function clearAlert() {
function clearMessage() {
clearTimeout(timeoutID);
}
</pre>

<pre class="brush: css hidden">
#output {
padding: .5rem 0;
}
</pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample('setting_and_clearing_timeouts')}}</p>
Expand Down