Simple javascript doesn't work on a tailwindcss basic setup - javascript

I want to change an image on a click but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/build/tailwind.css" />
<title>Document</title>
</head>
<body class="bg-black">
<h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>
<lottie-player
src="https://assets7.lottiefiles.com/private_files/lf30_vAtD7F.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay
id="img"
onclick="change()"
>
</lottie-player>
<script src="../js/index.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
</body>
</html>
function change() {
document.getElementsByName('lottie-player').src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
}
I got this error, on the console:

Using onclick attribute is considered as a bad practice. Instead, use addEventListener().
And note that, getElementsByName() returns a collection of all elements in the document with the specified name.
document.getElementById('img').addEventListener('click', function() {
this.src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
});

Related

html2canvas unable to download

I have this code below that contains a simple hello world html page i'm trying to use the library html2canvas to try to download the canvas but it doesn't seem to be working i'm following a tutorial i saw but it doesn't work am i doing something wrong below? Any help would be greatly appreciated.
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#match-button').attr('href', canvas.toDataURL('image/png'));
$('#match-button').attr('download', 'Test.png');
$('#match-button')[0].click();
});
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
</body>
</html>
First of all. If test is an id of some element, jQuery syntax requires # before it.
$('#test')
Then, html2canvas onrendered option is deprecated. Use then() method instead as described on the official site https://html2canvas.hertzen.com/. I could not find test element in html snippet from the question, so I added it after the match-button. The modified code looks like this:
<script>
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
</script>
...
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
<a id="test" href="#"></a>

Why doesn't this onclick handler on an img work?

I use a <img>, set onclick() method, but it cannot call the method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
<img id="img-id" src="resources/01.jpg" width="200px" height="80px" style="CURSOR:pointer;" onclick="close();">
</div>
<script type="text/javascript">
function close(){
console.log('js');
alert(111);
}
</script>
</body>
<html>
Why when I click the <img>, it can not execute the close() cody?
I really don't know how to resolve the issue.
As haim770 pointed out in a comment (edit; and now an answer), the problem is the name of the function. The global namespace is really crowded, and there's already a close function in it that you can't override. Use a different name.
This is one of the many reasons not to use onxyz attribute-style event handlers: They require that your functions be globals. Instead, use modern event handling that doesn't require that you use globals:
document.getElementById("img-id").addEventListener("click", function() {
// ...your code here...
}, false);
Make sure the code above runs after the img element exists. (If you have to support obsolete browsers like IE8 — or IE9-11 when they hobble themselves with [in]compatibility mode — see this answer.)
Example:
document.getElementById("img-id").addEventListener("click", function() {
// ...your code here...
alert("Clicked");
}, false);
<div style="width: 300px; height: 200px;" id="img-div">
<img id="img-id" src="https://www.gravatar.com/avatar/4f8efc215ecc23017b42334c9b30c49b?s=32&d=identicon&r=PG&f=1" style="CURSOR:pointer;">
</div>
When you define a function named close on the global context (window, in case of the browser), you're actually defining it as window.close. But, since window.close is reserved for the purpose of closing the current window, they collide.
Change the name to something less generic:
function closeIt() {
// ...
};
The problem is in the name "close()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
<img id="img-id" src="resources/01.jpg" width="200px" height="80px" style="CURSOR:pointer;" onclick="closing();">
</div>
<script type="text/javascript">
function closing(){
console.log('js');
alert(111);
}
</script>
</body>
<html>
You have used close() function which is same as JavaScript's native close() function, so use another name as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<div style="width: 300px; height: 200px;" id="img-div" >
<img id="img-id" src="resources/01.jpg" width="200px" height="80px" style="CURSOR:pointer;" onClick="close_function();"/>
</div>
<script type="text/javascript">
function close_function(){
console.log('js');
alert(111);
}
</script>
</body>
<html>

Chrome App : How to update the content of an element of a secondary window created in the main window of a Chrome App?

i want to create a simple chrome App which launches a window, 'window.html', which contains 2 buttons.
1/ #btn1 creates a new window, loading "video.html". A video player,
playing "file1.webm".
2/ #btn2 updtates the source of the video from "file1.webm" to
"file2.webm".
The first part is trivial :)
The second part is tricky.
Is it possible ?
You'll find my files below.
Thank you :)
<!DOCTYPE html>
<html >
<head>
<title>Chrome : Multiple Window</title>
<link href="./css/main.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/test.js"></script>
</head>
<body>
<button id="btn1" type="button" >Launch video Player</button>
<button id="btn2" type="button" >Update Video</button>
</body>
</html>
$(document).ready(function() {
$("#btn1").click(function(){
chrome.app.window.create('video_window.html', {"width":1280, "height": 720});
});
$("#btn2").click(function(){
$('#myvideo video source').attr('src', './video/avatar.webm');
});
});
<!DOCTYPE html>
<html>
<head>
<link href="./css/video.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<video id="myvideo" autoplay loop>
<source src="./video/the_master.webm" type="video/webm">
</video>
</div>
</body>
</html>
chrome.app.window.create accepts a callback which will be invoked with the created window. You can store a reference to this window, and then either execute functions directly on it, or use window.postMessage to communicate with it.
var videoWindow = null;
$("#btn1").click(function() {
chrome.app.window.create('video_window.html', {
"width": 1280,
"height": 720
}, function(window) {
videoWindow = window.contentWindow;
});
});
$("#btn2").click(function() {
videoWindow.doSomething('./video/avatar.webm');
});
Another option, is to use the chrome runtime API to communicate:
chrome.runtime.sendMessage("do-stuff")
chrome.runtime.onMessage.addListener(function(e) {
// do stuff
})

Dynamic less variable values using javascript - Browser compatability issue

Dynamically update less variables from javascript using less.modifyVars method. It works fine on chrome but not supported by Firefox and IE-11(i.e. color attribute value does not be applied on firefox and IE-11).
Using less.js for compilation, please refer the code and screenshot, I don't know where I did mistake.
// HTML Code
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="css/color.less" />
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/less.js"></script>
<script type="text/javascript">
less.modifyVars({
'#color': 'blue'
});
</script>
</head>
<body>
<div class="row1" style="width: 250px; height: 250px;">box1</div>
<div class="row2" style="width: 250px; height: 250px;">box2</div>
</body>
</html>
//LESS Code(color.less)
#color:"red";
.row1
{
background-color:#color;
}
.row2
{
background-color:#color;
}
Error screenshot: "http://s8.postimg.org/ia9ki4nnp/Browser.png"

Adding an onclick event to a div element

I saw a few similar topics which did help but I have specific problem and didn't manage to solve it alone so if anyone can help out I would appreciate it
I want to add onclick event to a div element.
HTML:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')"></div>
JavaScript:
function klikaj(i)
{
document.getElementById(i).style.visibility='visible';
}
Wanted result: div with id="rad1" (which is hidden) turns visible, when clicked on div with id="thumb0".
This works when I add it to a button element but don't know how it goes with div elements.
I'm not sure what the problem is; running the below works as expected:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">knock knock</div>
​<div id="rad1" style="visibility: hidden">hello world</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script>
function klikaj(i) {
document.getElementById(i).style.visibility='visible';
}
</script>
See also: http://jsfiddle.net/5tD4P/
maybe your script tab has some problem.
if you set type, must type="application/javascript".
<!DOCTYPE html>
<html>
<head>
<title>
Hello
</title>
</head>
<body>
<div onclick="showMsg('Hello')">
Click me show message
</div>
<script type="application/javascript">
function showMsg(item) {
alert(item);
}
</script>
</body>
</html>
Depends in how you are hiding your div, diplay=none is different of visibility=hidden and the opacity=0
Visibility then use ...style.visibility='visible'
Display then use ...style.display='block' (or others depends how
you setup ur css, inline, inline-block, flex...)
Opacity then use ...style.opacity='1';
Its possible, we can specify onclick event in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="thumb0" class="thumbs" onclick="fun1('rad1')" style="height:250px; width:100%; background-color:yellow;";></div>
<div id="rad1" style="height:250px; width:100%;background-color:red;" onclick="fun2('thumb0')">hello world</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script>
function fun1(i) {
document.getElementById(i).style.visibility='hidden';
}
function fun2(i) {
document.getElementById(i).style.visibility='hidden';
}
</script>
</body>
</html>
I think You are using //--style="display:none"--// for hiding the div.
Use this code:
<script>
function klikaj(i) {
document.getElementById(i).style.display = 'block';
}
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">Click Me..!</div>
<div id="rad1" class="thumbs" style="display:none">Helloooooo</div>

Categories

Resources