HTML 按鈕未顯示

Question

我正在嘗試創建一個程序，該程序可以生成一個笑臉和三個按鈕，一個使臉變黃，另外兩個使眼睛變黑。 這是我到目前為止的代碼：

JS文件

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文件

<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>

該程序顯示面部，但由於某種原因按鈕未顯示。 任何幫助將不勝感激。

Answer 1

您的 HTML 無效。 您在<head>有一個無與倫比的<object>標簽。

<object>不是自動關閉標簽。 關閉它： <object type="image/svg+xml" data="smiley.svg" width="200" height="200"></object> 。 這可能是沒有其他內容顯示的主要原因，因為頁面的其余部分現在位於object 標記內。
將可見標記放入<head>沒有意義（也無效）。 <object>標簽應該進入<body> 。

此外，您似乎在 JS 和 SVG 文件的末尾都有一個雜散的反引號` ，至少在您的帖子中如此。 更好地檢查以確保它們不在真實文件中。

HTML 按鈕未顯示

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-09 18:56:15

HTML 按鈕未顯示

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-09 18:56:15

解決方案1
1 已采納 2020-03-09 18:56:15