OnClick event in Javascript not taking effect

OnClick event in Javascript not taking effect - javascript

I've searched for this question and none of the other questions have a similar setup to mine. Basically, I'm following a tutorial and want to create a custom pop-up window that asks the user if they want to do an action. This pop up window has a "Yes" and a "No" button. My issue is nothing happens when either of the buttons are clicked. Here is my code, I am using brackets.
/*global alert, prompt, window, document*/
"use strict";
function play() {
//text adventure game here
}
function CustomConfirm(){
this.render = function() {
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5) + "px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Are you sure?";
document.getElementById('dialogboxbody').innerHTML = "Select Yes or No...";
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Dialog.yes()">Yes</button> <button onclick="Dialog.no()">No</button>';
}
this.yes = function() {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
play();
}
this.no = function() {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
alert("Goodbye!");
}
}
var Confirm = new CustomConfirm();
//play();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript!</title>
<link href="styles/dialog.css" type="text/css" rel="stylesheet">
<script src="scripts/dialog.js" type="text/javascript"></script>
</head>
<body>
<h1>Zombie Apocalypse!</h1>
<p>Directions for text adventure game here</p>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<button onclick="Confirm.render()">Play Again?</button>
</body>
</html>
Any help would be much appreciated.

You don't have a variable called Dialog. I removed your onclick and changed it to a click handler while calling Confirm.
/*global alert, prompt, window, document*/
"use strict";
function play() {
//text adventure game here
}
function CustomConfirm(){
this.render = function() {
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5) + "px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Are you sure?";
document.getElementById('dialogboxbody').innerHTML = "Select Yes or No...";
document.getElementById('dialogboxfoot').innerHTML = '<button id="confirm-yes">Yes</button> <button id="confirm-no">No</button>';
document.getElementById("confirm-yes").addEventListener("click",function(){
Confirm.yes();
});
document.getElementById("confirm-no").addEventListener("click",function(){
Confirm.no();
});
}
this.yes = function() {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
play();
}
this.no = function() {
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
alert("Goodbye!");
}
}
var Confirm = new CustomConfirm();
//play();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript!</title>
<link href="styles/dialog.css" type="text/css" rel="stylesheet">
<script src="scripts/dialog.js" type="text/javascript"></script>
</head>
<body>
<h1>Zombie Apocalypse!</h1>
<p>Directions for text adventure game here</p>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<button onclick="Confirm.render()">Play Again?</button>
</body>
</html>

Related

User input creates Popup image

I am not a coder or developer and have hired a developer from Fiver to make some modifications to an html5 website template that I'm modifying as a game for my daughter so only she will see it. The developer is really struggling with a javascript image popup and I'm looking for help
What I want to happen
on button click Enter code box pops up. If user enters 1234 image max1.jpg pops up
on button click Enter code box pops up. If user enters 2345 image max2.jpg pops up
Below is the developers code which looks a bit clunky and does not work well - the images are cut off. Any help would be appreciated and do the images sizes need to be specified somewhere?
Button Code
<a class="btn btn-primary js-scroll-trigger" href="#about" id="but" onclick="myFunction()">CODE</a>
In Body
<img id="image1" src="assets/img/max1.jpg" width="100%" style="visibility: hidden;">
<img id="image2" src="assets/img/max2.jpg" width="100%" style="visibility: hidden;">
<img id="image3" src="assets/img/max3.jpg" width="100%" style="visibility: hidden;">
<script>
var modal = document.getElementById("myModal");
var m1 = document.getElementById("m1");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function myFunction() {
var code = prompt("Enter Code:", "");
if (code == "1234")
{
// m1.style.width = "70%";
document.getElementById("image2").style.display = "none";
document.getElementById("image3").style.display = "none";
document.getElementById("image1").style.display = "block";
document.getElementById("image1").style.visibility = "visible";
// document.getElementById("image1").style.width = "100%";
// document.getElementById("image1").style.height = "100%";
modal.style.display = "block";
}
else if (code == "2345") {
// m1.style.width = "70%";
document.getElementById("image1").style.display = "none";
document.getElementById("image3").style.display = "none";
document.getElementById("image2").style.display = "block";
document.getElementById("image2").style.visibility = "visible";
// document.getElementById("image2").style.width = "100%";
// document.getElementById("image2").style.height = "100%";
modal.style.display = "block";
}
else if (code == "3456") {
// m1.style.width = "70%";
document.getElementById("image1").style.display = "none";
document.getElementById("image2").style.display = "none";
document.getElementById("image3").style.display = "block";
document.getElementById("image3").style.visibility = "visible";
// document.getElementById("image2").style.width = "100%";
// document.getElementById("image2").style.height = "100%";
modal.style.display = "block";
}
else if (code == "4567") {
window.open("Instructions.pdf", '_blank');
}
else if (code == "5678") {
window.open("Instructions.pdf", '_blank');
}
}
</script>

Javascript event change

I have the following problem and I am new to JS. I need that every time I select an item of my "select" the event takes the value and shows me the div I need that is in "none". I do not know what I'm doing wrong.
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="#">
<select name="" id="mostrar">
<option>Select</option>
<option value="pos">Posadas</option>
<option value="obe">Obera</option>
<option value="eldo">Eldorado</option>
</select>
</form>
<div id="posadas">Posadas</div>
<div id="obera">Obera</div>
<div id="eldorado">Eldorado</div>
<script src="test.js"></script>
</body>
</html>
JS:
"use strict";
var pos = document.querySelector("#posadas").style.display = "none";
var obe = document.querySelector("#obera").style.display = "none";
var eldo = document.querySelector("#eldorado").style.display = "none";
var mostrar = document.querySelector("#mostrar");
mostrar.addEventListener("change", function{
if(mostrar.value == "pos") {
pos.style.display = "block";
obe.style.display = "none";
eldo.style.display = "none";
console.log(pos);
}else if(mostrar.value == "obe"){
obe.style.display = "block";
pos.style.display = "none";
eldo.style.display = "none";
console.log(obe);
}else{
obe.style.display = "none";
pos.style.display = "none";
eldo.style.display = "block";
console.log(eldo);
}
});

You are setting pos and the other variables incorrectly. As you have it they are all going to be set to the value "none", and not the elements themselves.
Assignments are done right to left so something like:
a = b.something = 3;
will cause both variable a and object b's something property to have the value 3.
You need to split up your lines to assign the element to the variable first then do your style change:
var pos = document.querySelector("#posadas");
var obe = document.querySelector("#obera");
var eldo = document.querySelector("#eldorado");
pos.style.display = "none";
obe.style.display = "none";
eldo.style.display = "none";

Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick

Below is the html for an index page I've been working on. I want to create a button with an onclick function to say "hello world". So I used the script at the bottom of the page, but the button triggers the error described.
The most confusing part of it all, the button was functioning just fine until I changed the name of the function. I've had trouble since, even when I changed the name of the function back to what it is now.
<body>
<h1>Play Color Trivia</h1>
<div id="message">
</div>
<button onclick="sayhello()">speak</button>
<button id="roll_button" onclick="color_roll()">Color Roll</button><br><br>
<div id="color_box">
<div id="score_box">
<ul id="list" style="list-style-type: none">
<%= erb :token %>
</ul>
</div>
</div><br><br>
<div id="button_box">
<form id="color_form" method="post" target="frame">
</form>
</div><br><br>
<div id="question_box">
</div>
<div id="results">
</div>
<script src="/script.js" type="text/javascript">
</script>
<script src="http://code.responsivevoice.org/responsivevoice.js">
function sayhello(){
responsiveVoice.speak("hello world");
}
</script>
<iframe id="frame" name="frame"></iframe>
Script.js file
var evaluate; var list; var bullet; var colorize; var count; var stop; var change; var box; var roll_button; var button; var button_2; var message; var text; var question; var button_box = document.getElementById("button_box");
function color_roll(){
roll_button = document.getElementById("roll_button")
roll_button.style.display = "none"
box = document.getElementById("color_box");
change = setInterval(color,250)
stop = (Math.floor(Math.random() * 18))+1
// stop = 7
count = 0
}
function color(){
var array = ["red","orange","yellow","green","blue","purple","red","orange","yellow","green","blue","purple","red","orange","yellow","green","blue","purple"]
box.style.backgroundColor = array[count];
count += 1;
if (count == stop){
colorize = array[count-1]
clearInterval(change);
create_buttons();
color_selection();
}
}
function color_selection(){
if (colorize == "orange"){
message = document.getElementById("message");
text = document.createTextNode("You rolled an " + colorize);
message.appendChild(text);
rolled_color();
}
else{
message = document.getElementById("message");
text = document.createTextNode("You rolled a " + colorize);
message.appendChild(text);
rolled_color();
}
}
function helper(){
remove();
color_roll();
}
function create_buttons(){
button = document.createElement("input");
button_2 = document.createElement("input");
button.type = "button";
button_2.type = "button";
button.value = "Choose Color";
button_2.value = "Roll Again";
button.setAttribute("onClick","display()")
button_2.setAttribute("onClick","helper()");
button_box = document.getElementById("button_box");
button_box.appendChild(button);
button_box.appendChild(button_2);
}
function remove(){
button_box = document.getElementById("button_box");
button_box.removeChild(button);
button_box.removeChild(button_2);
message.removeChild(text);
}
//Create JSON objects for trivia questions
// var object = JSON.parse('{"red":"Three trivia questions will appear here"}')
function display(){
remove();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
document.getElementById("question_box").innerHTML = this.responseText;
}
};
xhttp.open('GET','/question',true);
xhttp.send();
document.getElementById("question_box").style.display = "block"
}
function hello(){
console.log("hello world")
}
function display_result(){
// remove();
document.getElementById("submit").style.display = "none"
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
document.getElementById("results").innerHTML = this.responseText;
}
};
xhttp.open('GET','/test',true);
xhttp.send();
}
function rolled_color(){
var input = document.createElement("input");
input.style.display = "none";
var submit = document.createElement("input");
submit.style.display = "none";
input.name = "rolled_color";
input.value = colorize;
submit.type = "submit";
var form = document.getElementById("color_form")
form.appendChild(input)
form.appendChild(submit)
document.forms['color_form'].submit();
// display();
}
function add_bullet(){
document.getElementById("test").style.display = "none"
document.getElementById("evaluate_button").style.display = "none"
document.getElementById("question_box").style.display = "none"
evaluate = document.getElementById("value_input").value
bullet = document.createElement("li")
canvas = document.createElement("canvas")
var ctx = canvas.getContext("2d")
list = document.getElementById("list")
// list.style.list-style-type: none
canvas.width = 50
canvas.height = 50
// canvas.style.border = "2px solid black"
canvas.style.backgroundColor = colorize
// canvas.appendChild(document.createTextNode("test"))
if (evaluate == "You're Correct!"){
bullet.appendChild(canvas);
list.appendChild(bullet);
}
color_roll();
}

As described in this question
If a <script> has a src then the text content of the element will be not be executed as JS (although it will appear in the DOM).
You need to use multiple script elements.
a <script> to load the external script
a <script> to hold your inline code (with the call to the function in the external script)
In your case you have to use two scripts as follows,
<script src="http://code.responsivevoice.org/responsivevoice.js">
</script>
<script>
function sayhello(){
//function calls to externel js
}
</script>

If an external script is referenced, the script inside is not executed

How do i change my text everytime when i click on the link in JavaScript?

I would like to create a text generator however when i click on the link it can only generate some sample text which is stored in array once. I have tried using more than one string but i cant get it to work. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Text generate 2 - copy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
Generate
<h1 id="head"></h1>
<p id="para"></p>
<script src="js/script.js"></script>
</body>
</html>
JS:
var heading = document.getElementById('head');
var paragraph = document.getElementById('para');
var head = ["Sample heading one"];
var para = ["Sample paragraph one"];
document.getElementById("link").onclick = function visible() {
if (heading.style.display = "none")
{
heading.style.display = "block";
}
else
{
heading.style.display = "block";
}
if (paragraph.style.display = "none")
{
paragraph.style.display = "block";
}
else
{
paragraph.style.display = "block";
}
heading.innerHTML = head;
paragraph.innerHTML = para;
}
JS Bin

Percentage bar goes up as button is pressed

the code so far
Now if you press a button, no matter which one, a div and a percentage will be shown. I've got that going for me, but if one div is toggled, and another one is pressed, the 66% div should be toggled and so on if two divs are shown and the third is toggled the 100% div should show up.
Basicly if you click a button, a div and a percentage div is revealed if you click aonther the percentage bar goes up. How do I do this? if two divs are toggled and if you press the button two diffrent divs are shown?
JS
function showhide()
{
var div = document.getElementById("lol");
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
if (div.style.display !== "none")
{
div.style.display = "none";
id3.style.display = "none";
}
else {
div.style.display = "block";
}
}
function showhide2()
{
var div2 = document.getElementById("lol2");
if (div2.style.display !== "none") {
div2.style.display = "none";
}
else {
div2.style.display = "block";
}
}
function showhide3()
{
var div3 = document.getElementById("lol3");
if (div3.style.display !== "none") {
div3.style.display = "none";
}
else {
div3.style.display = "block";
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="lol"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "5"><p>100%</p></div>
<!-- End your code here -->
</body>
</html>

Not entirely sure what you mean but I think it might be something like this?
http://liveweave.com/PcZ7vL
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="lol1"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "7"><p>100%</p></div>
</body>
</html>
JavaScript:
var one = 0
var two = 0
var three = 0
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
var id7 = document.getElementById("7");
var div1 = document.getElementById("lol1");
var div2 = document.getElementById("lol2");
var div3 = document.getElementById("lol3");
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
function showhide()
{
if (div1.style.display !== "none")
{
div1.style.display = "none";
one = 0
}
else {
div1.style.display = "block";
one = 1
}
showper();
}
function showhide2()
{
if (div2.style.display !== "none") {
div2.style.display = "none";
two = 0
}
else {
div2.style.display = "block";
two = 1
}
showper()
}
function showhide3()
{
if (div3.style.display !== "none") {
div3.style.display = "none";
three = 0
}
else {
div3.style.display = "block";
three = 1
}
showper()
}
function showper()
{
var sum = one + two + three
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
if (sum == 1) {
id3.style.display = "block";
} else if (sum == 2) {
id5.style.display = "block";
} else if (sum == 3) {
id7.style.display = "block";
}
else {
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
}
}
EDIT:
A slightly neater way to do it would be this: http://liveweave.com/YAHn55.
Also, you should take a look at jQuery, makes things like this much simpler.
EDIT:
see example

Develop Reference

JavaScript is the programming language of the Web.

OnClick event in Javascript not taking effect - javascript

Related

User input creates Popup image

Javascript event change

Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick

How do i change my text everytime when i click on the link in JavaScript?

Percentage bar goes up as button is pressed

Categories

Resources