Events was not working properly in Javascript - javascript

I created a simple event script, which changes the image when clicked on the button. But unfortunately not changing, please help.
Error: I am not getting any error message also , just it was not changing the image.
<html>
<head>
<title>Events Practise</title>
<style>
#imtest{
width:100px;
height:150px;
}
</style>
</head>
<body>
<h4> This a practise page of Events and event handlers </h4>
<p> Hi this the practise page that changes the Html and Css contents in the page by Using the JavaScript </p>
<img id="imtest" src="marni.jpg" alt="Image corrupted">
<button onclick="eventtest()">Change Image</button>
<script>
function eventtest()
{
var imt = document.getElementById("imtest");
imt.onclick = change;
}
function change()
{
var imtchng = document.getElementById("imtest");
imtchng.src = "marni1.png";
}
</script>
</body>

I created a simple event script , which changes the image when clicked
on the button
No you've created a script which set's a click handler on the image when the button is clicked and after that when the image is changed it will change.
If you want to change the image directly by clicking just set the click handler on it.

In the imt.onclick = change line you are forgetting the parentheses after the change. Replace it with change()

<script>
function eventtest()
{
change();
}
function change()
{
var imtchng = document.getElementById("imtest");
imtchng.src = "marni1.png";
}
</script>
or
<button onclick="change()">Change Image</button>

Related

AddEventListener to svg file and not button that makes it clickable

Here is my objective :
I want to have a button on my html page that when it is clicked, makes and svg clickable, and when that svg is clicked, the page displays the message "clicked".
I have an html file where I create a button and a div that holds an svg file :
HTML File
*....*
<div>
<p>This will be replaced <br/>
<span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>
*....*
<br />
<input name="button5" type="button" id="myButton5" onClick="button5_makeClickable('svgfile');" value="4. Svg clickable" />
<br />
*....*
<div>
<object id="svgfile" data = "exemple.svg" type="image/svg+xml"> </object>
</div>
What I want is that when I press my button5 it is supposed to make the svg file clickable, the function that I call are in another javascript file :
JS File
*....*
function setName(name) {
var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
elementHtmltoFill.innerHTML = name;
}
*....*
function button5_makeClickable(id) {
var drawing = document.getElementById('svgfile');
drawing.addEventListener('click', setName("clicked"));
}
*....*
However what happens is that "clicked" is displayed as soon as I click on the button (and not the svg).
I don't understand why since I add the event listener to drawing (therefore the svg)?
Thank you for your help !
PS : I am trying to understand the use of the function addEventListener, so I would prefer if your help uses it please.
You must make sure you listener for the svgfile object is outside the onclick function for your button otherwise you can only ever click on the svgfile object whenever you are simultaneously clicking on the button.
By doing setName("clicked") you instantly call the setName function instead of passing a reference to the function. You can solve this passing a function as the event handler argument in which you call setName("clicked").
function button5_makeClickable(id) {
var drawing = document.getElementById('svgfile');
drawing.addEventListener('click', function() {
setName("clicked")
});
}
But, your code currently is constantly adding event listeners to the <object> element. The element only needs 1 click event listener.
Use a flag. This a boolean (true / false) which acts like a switch to do or to not do something based on its value. Add a event listener to the <object> element and check in the event handler if the flag is true. If it is, change the text inside your span, if it isn't, don't do anything.
The example below shows how this could work.
Also, prevent using inline event listeners in your HTML. Using addEventListener is the way you should be learning how to attach event handlers.
var myButton5 = document.getElementById('myButton5');
var drawing = document.getElementById('svgfile');
var svgIsClickable = false;
function setName(name) {
var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
console.log(elementHtmltoFill)
elementHtmltoFill.innerHTML = name;
}
function button5_makeClickable(event) {
svgIsClickable = true;
}
myButton5.addEventListener('click', button5_makeClickable);
drawing.addEventListener('click', function() {
if (svgIsClickable === true) {
setName("clicked");
}
});
object {
display: block;
width: 50px;
height: 50px;
background: gray;
}
<div>
<p>This will be replaced <br/>
<span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>
<br />
<input name="button5" type="button" id="myButton5" onClick="button5_makeClickable" value="4. Svg clickable" />
<br />
<div>
<object id="svgfile" data="exemple.svg" type="image/svg+xml"> </object>
</div>

How can I fix this jQuery glitch so the div doesn't try to disappear when using .hover()?

What I'm trying to accomplish is make a div visible when hovering over another using the .hover() method, addClass and removeClass. But what happens is that when I hover over the added div, it reads that I'm no longer hovering over the div specified (or at least that's what I assume) in the .hover() method. This causes the div to flash on and off the screen repeatedly. How can I fix this so this problem doesn't happen? Here is the code:
JS
$(document).ready(function(){
$('.building').hover(
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).addClass('active');
},
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).removeClass('active');
}
);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {
document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>
If the balloon overlaps the Div, it captures the event “onmouseover”.
If you don’t have to deal with it, you could use css rule to prevent any action
.balloon {
pointer-events: none;
}
This rule allows the event to pass through the balloon, as if it didn’t exist.

Change Element inside element with Onclick or Hover property

<html>
<head>
<style>
#container {position:relative;left:15%;}
#myImage {width:65%;height:280px;}
#text {padding-top: 50px;}
#textbox {width:65%;height:280px;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="container" onclick="changeImage()" >
<img id="myImage" src="C:\Documents and Settings\svarghe1\My Documents\Downloads\Jaguar_Xj_Saloon_4.jpgj_.jpg" alt="">
<div id="textbox">
<p style="color:white;text-align:center;margin-top:50px;"class="text">Jaguar_Xj_Saloon</p>
<script>
function changeImage() {
if (document.getElelmentById("container").innerHTML="myImage") {
container.appendChild(myImage)
} else {
container.appendChild(textbox)
}
}
</script>
</div>
</div>
</body>
</html>
Here, I am trying to create a script for Sharepoint site page to change an element in div from Image to textbox with Onclick or hover property. There might be a lot of mistakes as this is my first attempt on JS. I have also tried
<script>
function changeImage() {
var image= document.getElementById("myImage");
if (image=true) {
var element = document.getElementById("container");
var UImage = document.createElementById("myImage");
element.appendChild(UImage)
} else {
var element = document.getElementById("container");
var Utextbox = document.createElementById("textbox");
element.appendChild(UImage)
element.appendChild(Utextbox);
}
}
</script>
#container:hover #myImage{ display:none; }
I have tried the code above in CSS, instead of script. It didn't work. At the same time the code,
a:hover #box{ text-decoration: none;color:green;background-color: Turquoise;cursor:pointer }
Works really fine. Why is that? I have given class instead of id. It also didn't work. It works in ordinary HTML file. But can't get to work in Sharepoint site.
So, can you help?
Instead of appending Image and text box from the javascript, you can already write the html codes for both and do the hide/show according to your need. I think it will make things lot easier and neat.
As for the Hover property, you can attach event of hover with jquery.
You can check the following link: http://api.jquery.com/hover/

How to create a single onclick event for multiple div elements

I'm still learning my way through all this stuff but what I was trying to do now was create a Tic-Tac-Toe game out of HTML, CSS & Javascript. However no matter what I try my onClick events won't run correctly. I just want the game to respond to the click by the player, send the identity of the tile clicked to the function so that it knows which one to change, and then change the tile's image (to either a nought or a cross).
I'm thinking that the best way to do this is have the onClick pass a different argument through depending on the id of the tile clicked but it's telling me that placeTile() isn't defined and besides there has to be an easier way to do it than the cocktail that I've conceived. Thanks for your help in advance! :)
The HTML:
<html>
<head>
<title> Tic-Tac-Toe </title>
<link type='text/css' rel='stylesheet' href='Tic-Tac-Toe.css'/>
<script type='text/javascript' src='JQuery/jquery-1.11.1.js'></script>
<script type='text/javascript' src='Tic-Tac-Toe.js'></script>
</head>
<body>
<div id='game'>
<div id='container'>
<div id='board'>
<div class='emptyTile' id='NW' onClick='placeTile("NW")'></div>
<div class='emptyTile' id='N' onClick='placeTile("N")'></div>
<div class='emptyTile' id='NE' onClick='placeTile("NE")'></div>
<div class='emptyTile' id='W' onClick='placeTile("W")'></div>
<div class='emptyTile' id='C' onClick='placeTile("C")'></div>
<div class='emptyTile' id='E' onClick='placeTile("E")'></div>
<div class='emptyTile' id='SW' onClick='placeTile("SW")'></div>
<div class='emptyTile' id='S' onClick='placeTile("S")'></div>
<div class='emptyTile' id='SE' onClick='placeTile("SE")'></div>
</div>
</div>
<div id='scores'>
<div class='score' id='Score1'> Player 1: <br/> <span id='pOne' class='num'>0</span></div>
<div class='score' id='Score2'> Player 2: <br/> <span id='pTwo' class='num'>0</span></div>
</div>
</div>
</body>
</html>
The Javascript Function:
function placeTile(a){
var tile = document.getElementById(a);
if (currentPlayer == 0) {
tile.removeClass('emptyTile');
tile.addClass('cross');
currentPlayer = 1;
} else {
tile.removeClass('emptyTile');
tile.addClass('nought');
currentPlayer = 0;
}
}
So as you can see I'm doing this in a roundabout way, but the onclick event is supposed to pass the id of the div to the function, which is then used to make all the necessary changes to that div only and also swap the current player. But it is very messy and I;m sure I could clean it up somehow if I could just figure out how to make one javascript function react differently depending on what div is clicked...
Oh I love code but I also hate it too. It's addictive really.
You've included jQuery so use the click event as per this JSFiddle.
http://jsfiddle.net/Delorian/3f2tvabo/
$('.emptyTile').click(function () {
if (currentPlayer == 0) {
$(this).removeClass('emptyTile');
$(this).addClass('cross');
currentPlayer = 1;
} else {
$(this).removeClass('emptyTile');
$(this).addClass('nought');
currentPlayer = 0;
}});
You won't need anything on the HTML elements apart from the class to indicate a tile.
You can take your second bloc of js code, Javascript function, and place it in a different class. then call it. Say for example you placed you code in a file called onclick.js then you'll call it in this form:
<script type="text/javascript" src="onclick.js"></script>
and if you placed in a folder, say for example it's called myFolder, then you'll call it with:
<script type="text/javascript" src="myFolder/onclick.js"></script>
I hope that helps.
First what does placeTile really need? Because it is being called from a DOM event drop the notion that you need to give it a string in the first place. For example:
function placeTile(tile) {
tile.removeClass('emptyTile');
tile.addClass(['nought', 'cross'][currentPlayer]);
currentPlayer = (currentPlayer + 1) % 2;
}
Now use event delegation. Set a click handler on the parent element and then look at the events target property to get the element that was actually clicked.
Live: http://jsbin.com/rahaba/1/edit?js,output
var board = document.getElementById('board');
board.addEventListener('click', function(e) {
if (e.target === e.currentTarget) {
return; // This is the parent div, we only want the children
}
if (e.target.tagName === 'DIV') {
e.stopPropagation();
placeTile(e.target);
}
});
and in jQuery:
// Notice the extra 'div' selector.
$('#board').on('click', 'div', function() {
placeTile(this);
});

jQuery: Fire click on event on a span

I saw a post earlier today and have been playing around with: http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html
What I'd like to be able to do is when a span gets clicked, to fire the click event on a different element in the page:
<div class='editable sampleItem pointer' id='qqq'>click me!!!</div>
Is that possible?
sure..
$('.myspan').click(function(){
$('.different-div').click();
})
$('.different-div').click(function(){alert('div click fired')});
Check like this,
HTML:
<div class='editable sampleItem pointer' id='qqq' onclick='clickHandler()'>click me!!!</div>
Javascript:
<script type="text/javascript">
function clickHandler() {
/* You code here */
}
</script>

Categories

Resources