user3760941 user3760941 - 9 months ago 24
HTML Question

Confirm popup stating undefined and not changing paragraph

I have a confirm popup that says undefined where it should say the message ‘Press OK or Cancel’, and then the paragraph should change to either "you clicked ok" or "you clicked cancel".

Can someone explain why it's happening and how to fix? many thanks



@charset "UTF-8";
/* CSS Document */

body{
height:1000px;
width:100%;
background:#fff;
margin:0;
}

.divider{
width:100%;
height:auto;
background:#CCC;
display:block;
margin:10px;
}

h2{
font-size:16px;
display:block;
}
#confirm-paragraph{}
#global-variable-paragraph{}
#user-input{}
#expressions{}
#elephant-paragraph{}
#method-1{}
#method-2{}
#ml{}
#litres{}
#conditional-operator{}
#cast-1{}
#cast-2{}

<!-- Checklist: Confirm Example -->
<!-- Checklist: Local Variables -->
<section class="divider">
<h2>Confirm Example</h2>
<button onclick="confirm()">Click Me</button>
<p id="confirm-paragraph">This text should change after clicking the button.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version 1!!!!!!!!</p>
<p>Undefined should instead say "Press OK or Cancel".</p>
<p>And text should change to either "you clicked ok" or "you clicked cancel"</p>
<script>
function confirmFunction() {
var textentry;
var confirmation = confirm('Press OK or Cancel');
if (confirmation == true) {
textentry = "You clicked OK";
} else {
textentry = "You clicked Cancel";
}
document.getElementById("confirm-paragraph").innerHTML = textentry;
}
</script>
</section>




Answer Source

Your on-click refers to the wrong function:

<button onclick="confirm()">Click Me</button>

should be

<button onclick="confirmFunction()">Click Me</button>