How to Put Codes from Jsfiddle.Net into My Website

How do I put codes from jsfiddle.net into my website?

You are running this code immediately, rather than waiting for the DOM to be ready. This means that the element #box may not exist yet.

jsFiddle automates this process to make your code cleaner. You need to do it yourself when you put the code into your own website. It is very easy: you just need to put your code into a callback to the ready event on the document:

$(document).ready(function() {
    // put your Javascript here
});

or, a shortcut version:

$(function(){
    // put your Javascript here
});

These are semantically and functionally equivalent.

How to place code from JsFiddle to a website?

Your script resource:

<script src="http://joxongir.ucoz.com/cardgame.js"></script>

Must be loaded after the page is fully loaded. You can do this either by using jQuery's page ready handler, or by placing the script tab prior to the closing body tag.

To explain the problem detail, when line 1 of your external JavaScript script runs, the HTML DOM element id="deal" does not exist yet because the browser has not parsed thru the HTML yet. Attaching the event using $('#deal).click(... does nothing until the element exists.

Secondary issue:

You have not loaded jQuery UI, add this tag to your head to enable the UI functionality:

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

How do you get code like this to run in JsFiddle.net?

So the way javascript works with HTML to draw things is through the Canvas API. First you have to contextualization and establish interactions between JS code and <canvas> element. This is done with built in function and then a little bit of code to make it short-hand.

<html>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
const c = document.getElementById("canvas"); //Grab canvas element to use as object
const ctx = c.getContext('2d'); //Function that enable the 2d functions of Canvas API
ctx.fillRect(0,0,10,10) //Example of ctx function
<script>
</html>

From the JS Fiddle you gave us, It looks like you probably copied functions from a video that pre-established these function as they are not normal canvas function but custom functions. I can show you example of how to write one of these custom functions

function background(red,green,blue) {
    ctx.fillStyle = 'rgb('+red+','+green+','+blue+')';;
    ctx.fillRect(0,0,c.width,c.height); //Makes a rectangle the size of the canvas
}
background(172,238,247); //Creates a canvas sized rectangle with rgb(172,238,247)

You will have to either find his function declarations or write your own (or just use the raw canvas functions) to work with the javascript this way. You also need to define a canvas element with an ID. Lucky for you Im working on making a JSFiddle that works for you since you seem fairly new to this whole HTML5/JS thing.

-------EDIT-------

Heres your fiddle link friend, I included comments to help you understand everything https://jsfiddle.net/xwqg1cez/2/

code work on jsfiddle but not on my website?

I can't see you've included your JQuery library.

Put this somewhere in your code (e.g at the bottom, above your <script> tags)

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Or you can download the whole library locally to your computer and refer to it that way instead.

JSFiddle to HTML

You need to add jquery refence in your code

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

How to join the three different code boxes from jsfiddle.net into a HTML page?

Just copy and paste the respective sections in a new HTML file on say your desktop.

<html>
    <head>
    <style type="text/css">
        // CSS Content
        </style>
</head>
    <body>
    <!-- some html elements -->

        <script language="JavaScript"  type="text/javascript">
            // more js here.
        </script>   
    </body>
</html>

And then link in any dependencies such as jQuery within your head element.

Is there a download function in jsFiddle?

Ok I found out:

You have to put /show a after the URL you're working on:

http://jsfiddle.net/<your_fiddle_id>/show/

It is the site that shows the results.

And then when you save it as a file. It is all in one HTML-file.

For example:

http://jsfiddle.net/Ua8Cv/show/

for the site http://jsfiddle.net/Ua8Cv

How to run a jsfiddle result with url?

Add /show to the end of your URL: https://jsfiddle.net/foreyez/vdk7guob/show

How to programmatically generate code to display in jsfiddle.net?

It's possible to display a fiddle that's not saved in JSFiddle, using a POST.

API Documentation

https://docs.jsfiddle.net/api/display-a-fiddle-from-post

Example using form

https://jsfiddle.net/3Lwgk4c5/