How come this javascript code from codepen isn't working on jsfiddle?

JavaScript
1

How come this javascript code from codepen isn’t working on jsfiddle?

I copied it verbatim.

2

Browser console says that $ is not defined.
The code expects jQuery to be there.

Define jQuery as the library that’s being used, and it now works.

1 Like
5

I got it.

Everything gets thrown in the html part.

     <script
    type="text/javascript"
    src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"
    
  ></script>


<div id="container">
  <h1>Flat Gradient Generator</h1>
  <form id="inputForm">
    <h2>Input:</h2>
Color 1:
    <input id="color1" placeholder="Color 1" value="#555555" maxlength="7">
    <br>Color 2: 
    <input id="color2" placeholder="Color 2" value="#EEEEEE" maxlength="7">
    <br> Color 1 Width:
    <input id="width1" placeholder="Color 1 Width" value="5%">
    <br> Color 2 Width:
    <input id="width2" placeholder="Color 2 Width" value="50%">
    <br>Pattern Width:
    <input id="pwidth" placeholder="Pattern Width" value="20px">
    <br>Pattern Height:
    <input id="pheight" placeholder="Pattern Height" value="20px">
    <br>Pattern Rotation:
    <input id="prot" placeholder="Pattern Rotation" value="45deg">
  </form>

  <div id="outputForm">
    <h2>Output:</h2>
    <div id="demo">

    </div>

   
    
 
    
    <textarea id="cssOutput" value="button{
    background-color:009999;
      }"></textarea>
  </div>


</div>


  <script type="text/javascript">


    window.onload=function(){
      
$(document).ready(function() {
  var style = "";
  updateStyle();

  $("input").change(function() {
    updateStyle();
  });

});

function updateStyle() {
  style = "("+$("#prot").val() +
    ", " + $("#color1").val() +
    " 0," + $("#color1").val() +
    " " + $("#width1").val() +
    ", "+$("#color2").val() +
    " 0," + $("#color2").val() +
    " " +$("#width2").val() +
    ") 0 / "+$("#pwidth").val()+
    " "+$("#pheight").val();


  $("#demo").attr("style", "background:repeating-linear-gradient"+style+";");
 

  $("#cssOutput").val("background:repeating-linear-gradient"+style+";");

}

    }
</script>






body {
  color: #555;
  font-family: Segoe UI, Arial, sans-serif;
}

#container {
  width: 594px;
  margin: auto;
}

#container div,
#container form {
  float: left;
}

h1 {
  text-align: center;
  margin-bottom: 50px;
  width: 600px;
}

#inputForm {
  width: 300px;
  border-right: 1px solid #333;
  height: 500px;
}

input {
  border: 1px solid #333;
  margin-top: 25px;
  height: 25px;
  padding: 2px;
  width: 100px;
}

#outputForm {
  margin-left: 50px;
  width: 240px;
}

#demo {
  width: 242px;
  height: 242px;
  margin-bottom: 50px;
}

textarea {
  width: 242px;
  height: 100px;
  border: 1px solid #333;
  margin-bottom: 20px;
}

#codeOutput {
  margin-top: 25px;
}
6

Actually, that’s the bad way of doing it.

The better way is to select the gear cog (at the top left of the JS panel), and search for jQuery there to add an external script for it there.

7

jsfiddle and codepen don’t both work the same way.

8

Bingo! I got it

I just needed to add this in:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Thanks for showing me how to do this. I never used those functions before.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.