CODEWITHSUNDEEP
javascriptjqueryhtmlsvgbutton
Nate
Nate

Reputation: 13

HTML button not showing up

I am trying to create a program that produces a smiley face and three buttons, one to turn the face yellow and the other two to turn the eyes black. Here is the code I have so far:

JS File

var fill1 = "#ffff00";
var fill2 = "#000000";
$svg = $("#smiley");
var color = function () { 
    $("#ChangeFace").click(function(){ $("#face", $svg).attr('style', "fill:"+fill1) });
    $("#ChangeLEye").click(function(){ $("#Leye", $svg).attr('style', "fill:"+fill2) });
    $("#ChangeREye").click(function(){ $("#Reye", $svg).attr('style', "fill:"+fill2) });
};`

SVG file

<svg id="smiley" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="face" cx="100" cy="100" r="70" style="stroke: yellow; stroke-width: 4; fill: none"/>
  <circle id="Leye" cx="75" cy="75" r="10" style="stroke: black; stroke-width: 1; fill: none"/>
  <circle id="Reye" cx="125" cy="75" r="10" style="stroke: black; stroke-width: 1; fill: none"/>
  <path  id= "mouth" d="M75,120 Q100,145 125,120" style="stroke: black; stroke-width: 6; fill: none"/> 
</svg>`

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <object type="image/svg+xml" data="smiley.svg" width="200" height="200">  
  <script type="text/javascript" src="Smiley_Manipulation.js"></script> 
  <script>
    $(document).ready(color);
  </script>
</head>
<body>
    <button id="ChangeFace">Face</button>
    <button id="ChangeLEye">Left Eye</button>
    <button id="ChangeREye">Right Eye</button>
</body>
</html>

This program displays the face but the buttons aren't showing up for some reason. Any help would be greatly appreciated.

Upvotes: 1

Views: 476

Answers (1)

CherryDT
CherryDT

Reputation: 29012

Your HTML is invalid. You have an unmatched <object> tag in the <head>.

  1. <object> is not an autoclosing tag. Close it: <object type="image/svg+xml" data="smiley.svg" width="200" height="200"></object>. This is probably the main reason why nothing else shows up, because the rest of the page is now inside the object tag.

  2. It doesn't make sense (nor is it valid) to put visible markup into the <head>. The <object> tag should go into the <body>.

Also, it seems you have a stray backtick ` at the end of both the JS and SVG file, at least here in your post. Better check to make sure those are not in the real file.

Upvotes: 1

Related Questions