javascript on click function is not working at all - javascript

Second function, which should take me to player2.html, isn't working for some reason. Is there any mistake in syntax or format?
document.getElementById("start").onclick = function()
{
location.href="player.html";
}
//**>>>**This doesn't work. Button does nothing when clicked****
document.getElementById("next").onclick = function()
{
location.href="player2.html";
}
document.getElementById("startgame").onclick = function()
{
location.href = "gameboard.html";
}
This is index.html
<div class="container">
<header>
<h1>
Tic Tac Toe
</h1>
</header>
<div class="frame">
<div>
<button id="start">Start</button>
</div>
<div>
<button>Exit</button>
</div>
</div>
</div>
<script src="main.js"></script>
This is player.html
<div class="container">
<header>
<h1>Tic Tac Toe</h1>
</header>
<div class="frame">
<label for="player">Enter player1 name : </label>
<input type="textbox" id="player">
<div>
<button id="next">Next</button>
</div>
</div>
</div>
<script src="main.js"></script>

The following code is causing an error when you load the player.html page because there's no element with an id of "start" on that page.
document.getElementById("start").onclick = function()
{
location.href="player.html";
}
You'll get an error at the top of the JS file, which breaks the other buttons. I recommend jQuery, as it won't error when an ID isn't found when binding an onclick event. In jQuery do this.
$('#next').click(function(){
location.href="player.html";
});
If you don't want to use jQuery, here's the JavaScript way
var elem = document.getElementById("start");
if(elem){
elem.onclick = function()
{
location.href="player.html";
}
}

Related

Unable to change button colour, event script not executing

I know there are other ways around this, I'm more looking for an explanation of why this isn't working. I am trying to implement a quiz, the first section is multiple choice. When the correct answer is clicked I want the button to turn green, if any of the incorrect buttons are clicked I want them to turn red. I've checked the code on the validator and there doesn't appear to be any mistakes yet the buttons are still not interactive. Can someone explain what I am doing wrong here please?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
let incorrects = document.querySelectorAll(".incorrect_answer");
incorrects.addEventListener('click', function() {
let clicked = event.srcElement;
clicked.style.backgroundColor = 'red';
});
let correct = document.querySelector(".correct_answer");
correct.addEventListener('click', function() {
correct.style.backgoundColor = 'green';
});
});
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>How many species of Dolphin are there?</h3>
<button class="correct_answer">42</button>
<button class="incorrect_answer">53</button>
<button class="incorrect_answer">24</button>
<button class="incorrect_answer">11</button>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here use input tags -->
</div>
</div>
</body>
</html>
You are getting errors in the console, you didn't even open the dev tools
You can't use addEventListener on list of items
You are referencing event variable that doesn't exist
You had a typo in backgroundColor
document.addEventListener('DOMContentLoaded', function() {
let incorrects = document.querySelectorAll(".incorrect_answer");
incorrects.forEach(item => item.addEventListener('click', function(event) {
let clicked = event.srcElement;
clicked.style.backgroundColor = 'red';
}));
let correct = document.querySelector(".correct_answer");
correct.addEventListener('click', function() {
correct.style.backgroundColor = 'green';
});
});
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>How many species of Dolphin are there?</h3>
<button class="correct_answer">42</button>
<button class="incorrect_answer">53</button>
<button class="incorrect_answer">24</button>
<button class="incorrect_answer">11</button>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here use input tags -->
</div>
</div>

Dynamically adding div on button click and changing Id of each?

I'm new to JQuery and just wanted to add new clones on a button click:
I wrote this much code:
<div class="main" id="container">
<div class="item">
items
</div>
</div>
<button id="button">
Click me
</button>
<script>
$("#button").click(function () {
});
</script>
Exactly what I am looking for is a clone, but ids should be different
$("#button").click(function () {
$('.item').append('<div>new div</div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="main" id="container">
<div class="item">
items
</div>
</div>
<button id="button">
Click me
</button>
hope it will help
Try this :-
$("#button").click(function () {
var clone = $("#container").find(".item").last().clone();
clone.attr("id","newId");
$("#container").append(clone);
});

mouse down not working: jquery

I want to trigger the below function on the mouse down event on the class yeti. However,this does not seem to work.
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
//This code will run after your page loads
$('body').on('mousedown', '.yeti', function(event) {
alert("Yaaaarrrr!");
});
});
</script>
</body>
Your code is correct and should work (I just tested with jQuery 2). Make sure to put something inside the yeti div or make it a fixed size (width and height).
Now it will work perfectlly..:)
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".yeti").mousedown(function(){
alert("yeti pressed");
});
});
});
</script>
</body>

Why does my javascript-code to hide/show div-boxes not work?

I'm trying to hide/show the main-contentholders on my website based on what menu-option the reader clicks on. This seems like a simple thing to me, I've done it multiple times before but now it just won't work. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title id="titel">Mercedes F1</title>
<link rel="stylesheet" href="mercedes.css">
<meta name="viewport" content="width=device-width; initial-scale=1">
<script>
function sidbyte(p){
var p;
if(p == 1) {
document.getElementById("forare").style.display = "block";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "none";
}
else if(p == 2) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "block";
document.getElementById("statistik").style.display = "none";
}
else if(p == 3) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "block";
}
}
</script>
</head>
<body>
<div class="page">
<nav>
Förarbiografi
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
Mercedes F1
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
Statistik
</nav>
<div id="forare" class="main">
<h1 class="rubrik">Förare</h1>
<p>
</p>
</div>
<div id="mercedes" class="main">
<h1 class="rubrik">Mercedes F1 genom åren</h1>
<p>
</p>
</div>
<div id="statistik" class="main">
<h1 class="rubrik">Statistik</h1>
<p>
</p>
</div>
</div>
</body>
</html>
The main problem is that whenever you are clicking on the a tag the page reloads. So put # inside the href attributes of the a tags. Thats it.
Click Here
jsFiddle
Note : The local p declared inside the function is of no use as you are using the parameter. So better you remove that if you are only using the parameter, though it doesn't effect your code unless you refer to that with this keyword. Like,
this.p // refers to the local p you declared.
You're reloading the page each time the action is triggered, so the default state is returned, meaning that the transformation is no longer applied. By giving the <a> tag an href of # or javascript:void(0);, you can prevent the page refresh. Or even better, you can actually execute the JS from the href itself.
I actually recommend using javascript:void(0);, since it doesn't jump to the top of the page by default, while # does. However, that behavior can be prevented with a simple onclick="return false".
Codepen
Find the below code which i did using jQuery. It's very short and easy to understand.
HTML
<div class="page">
<nav>
<a class="one" href="#">Förarbiografi</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a class="two" href="#">Mercedes F1</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a class="three" href="#">Statistik</a>
</nav>
<div id="forare" class="main">
<h1 class="rubrik">Förare</h1>
<p>Content</p>
</div>
<div id="mercedes" class="main">
<h1 class="rubrik">Mercedes F1 genom åren</h1>
<p>Content</p>
</div>
<div id="statistik" class="main">
<h1 class="rubrik">Statistik</h1>
<p>Content</p>
</div>
</div>
JS
$('.one').click(function(){
$('.main').hide();
$('#forare').show();
});
$('.two').click(function(){
$('.main').hide();
$('#mercedes').show();
});
$('.three').click(function(){
$('.main').hide();
$('#statistik').show();
});
CSS
.main{
display:none;
}
JS FIDDLE DEMO

Calling an img tag in javascript

I am new at javascript and have been researching this for hours and can't seem to find an answer I understand. What I'm trying to do is once an image is clicked on the webpage I would like the textarea on my html to change fonts. Thanks for the help in advanced :)
Here is my HTML
<div id="buttonWrapper"> <!--BUTTON WRAPPER START -->
<div id="button01">
<img id="buttonImage" src="imges/font01.png" alt="button01"> </span>
</div>
<div id="textSpot" >
<textarea name="word"> </textarea>
</div>
Here is my javascript
function init(){
document.querySelectorAll(#buttonImage).onclick = changeFont;
function changeFont(){
document.querySelectorAll("word").style.fontFamily = "'Oswald', sans-serif";
}
}
You can use some thing like this
HTML
<div id="buttonWrapper">
<!--BUTTON WRAPPER START -->
<div id="button01">
<img id="buttonImage" src="imges/font01.png" alt="button01">
</div>
</div>
<div id="textSpot" >
<textarea name="word"> </textarea>
</div>
Js File
function init()
{
document.getElementById('buttonImage').onclick = changeFont;
}
function changeFont()
{
var textareas = document.querySelectorAll("textarea[name='word']");
for(var i=0;i<textareas.length;i++)
{
textareas[0].style.fontFamily = "'Oswald', sans-serif";
}
}

Categories