I am new to this site and this is first question I am asking here..if its simple pls forgive me..
I have drawn one background image, on this I am drawing 5 small small images by using drawImage() method. Once I touch the small images then they should disappear or should pop up one alert box but ontouch event is not occurring so far I have searched for ontouch event but no use. I dont want to draw images through img tag in HTML.
Here is my code segment
var car = new Image();
car.src = "img/car.jpg";
car.onload = function() {
imgLoaded = true;
}
if (imgLoaded = true) {
drawBackgroundImg();
drawCarImg();
}
function drawCarImg() {
if (i == 0) {
x1 = Math.floor((Math.random() * 501));
y1 = Math.floor((Math.random() * 301));
cxt.save();
cxt.drawImage(car, x1, y1, car.width, car.height);
cxt.restore();
}
}
car.on('touchstart', function() {
alert("T");
});
Here is my HTML code
<!DOCTYPE html>
<body>
<div id="container" onclick="void(0)">
<canvas id="can"> </canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
</body>
</html>
Could anybody help me to get the solution.
FYI: I am running this code in Phonegap NOT in browser.
$( '#id' ).on( 'touchstart',function(){
//your code
});
here id is id of your html element on which you want to listen touch event.
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});
I have found the answer, I made div with invisible and placed the images with position absolute and use the id's of images and trigger the touchstart event.
above said example here
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});
Related
I am working on the Rock Paper Scissors Game. Here is part of my original code without sound effect. I want to add a sound effect on the id of "r","p" & "s" which can play my audio when mouse over those button. I tried the method from other tutorials, but it still can't work. Can anyone help me with this issue. Thanks
HTML
<div class="choices">
<div class="choice" id="r">👊</div>
<div class="choice" id="p">✋</div>
<div class="choice" id="s">✌️</div>
<div class="resultAnnounce">
<p> </p>
<div class = "roundCount">
<p> </p>
</div>
JS
function main() {
rock_div.addEventListener('click', function() {
game('r');
})
paper_div.addEventListener('click', function() {
game('p');
})
scissors_div.addEventListener('click', function() {
game('s');
})
}
main();
This [example][1] here on codepen works fine for me. The trick is to add eventlisteners for mouseover and mouseleave.
hearbeat = document.getElementById('heartbeat')
resetBtn.addEventListener('mouseover', function() {
heartbeat.play();
}, false);
resetBtn.addEventListener('mouseleave', function() {
heartbeat.pause();
heartbeat.currentTime = 0;
}, false);
If it doesn't work it may be that your browser doesn't support the audio tag.
I am new to the javascript programming so can someone help me.
This is my code
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Change your colorIt function to the following. You need to set the src and then set the display to block. You might also want to move the height and width to CSS.
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg';
pic.width = 400;
pic.height = 150;
pic.style.display = "block";
}
function fillIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
The Source for the image in JavaScript is invalid. You used HTML hyperlinks in JS.
.innerHTML modifies the content between the opening and closing tags (<div>THIS</div>), not the content of the tag itself (<div THIS></div>).
You can modify the tags attribute using setAttribute or by setting a property directly:
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg'
pic.width='400px'
pic.height='150px'
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
You were on the right track. However, you need to set each property in JS.
ALso I could not get picturejs.org to load so I placed a picsum pic in there instead.
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picsum.photos/150/400'
pic.width='400'
pic.height='150';
pic.style.display='block';
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Please try the below code:
function fillIt(e) {
pic.style.display = "block";
pic.src ="https://libertycity.net/uploads/download/gta5_lamborghini/thumbs/4qhllsfhd8fk9bm4mf36761u37/15205818409903_63e23c-pgta535987529.jpg";
}
You need to add the root of your image in , for example depeding on where you have the image downloaded in your PC.
Hope this helps !
I am trying to create code that goes through a traffic light sequence when I click the button. I know there are a lot of people having the same problem however none of the solutions they got seem to work - I can only get the first asset (red traffic light) to display on the webpage and when I click the button nothing happens... Maybe I just need my code proof reading and there is something really obvious I've made a mistake on?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Task 3</h1>
<img id="image" src="red.png" style="width:200px">
<input type="button" onclick="nextpic()" value="change image" >
<script>
var image = document.getElementById("image");
var counter = 0;
var trafficlights = [
"redamber.png",
"amber.png",
"green.png",
"red.png"
];
function nextpic(){
counter =counter+1;
if (counter == trafficlights.length){
counter = 0;
}
image.src = trafficlights[counter];
}
</script>
</body>
</html>
I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
here's my HTML:
<body>
<div class="container">
<img src="2.png" />
<div id="colorChange"></div>
</div>
<div class="colorChoice">
<form id="colorChoiceForm">
<ul id="colorListParent">
<li class="noButton">
<input type="radio" name="colorGroup" value="aaa12" id="aaa12" />
<label style="background-color:#d21212" class="colorPick" for="aaa12"></label>
</li>
<li class="noButton">
<input type="radio" name="colorGroup" value="daaa" id="daaa"/>
<label style="background-color:#202020" class="colorPick" for="daaa"></label>
</li>
</ul>
</form>
</div>>
</body>
and JS:
function load() {
document.getElementById("colorListParent").addEventListener("click", function(e){
var bgrColor = (e.target.style.backgroundColor);
console.log(bgrColor);
console.log(typeof bgrColor);
document.getElementById("colorChange").style.backgroundColor = bgrColor;
});
}
window.onload = load;
Until I binded labels with buttons with for/id script worked - bby that I mean background color of #colorChange changed to color of clicked label.
Now var bgrColor returns two strings - first one of them is color I need, but the second one is empty and color of #colorChange doesn't change.
Where's problem?
Once you start using label[for], you'll have to approach it in a different way because your "click" event will be fired twice - once for the label and once for the radio button (which gets selected automatically. Here is a working fiddle and below is the changed JS code.
function load() {
document.getElementById("colorListParent").addEventListener("click", function(e){
//alert(e.target.id);
if(e.target.id) {
var selector = 'label[for=' + e.target.id + ']';
var label = document.querySelector(selector);
var bgrColor = label.style.backgroundColor;
//alert(bgrColor);
//alert(typeof bgrColor);
document.getElementById("colorChange").style.backgroundColor = bgrColor;
}
});
}
window.onload = load;
when you are clicking the label, the 'input' DOM element is clicked as well, so you basically have 2 'click' events.
try adding something like that:
if(bgrColor && bgrColor.length>0){
document.getElementById("colorChange").style.backgroundColor = bgrColor;
}