我正在尝试为 XML/XSL 类的学校项目开发一个页面，该页面使用按钮调用一个显示国家信息的函数。我能够使用下拉列表得到类似的东西，但是当我尝试将它更改为按钮时，出现了问题，我无法弄清楚它是什么。
xsl:
<?xml version='1.0' encoding='UTF-8' ?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<style>
#select {
position: absolute;
left: 0;
top: 0;
background-color: black;
width: 20%;
height: 100%
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
}
a {
color: white;
}
#demo {
position: absolute;
left: 20%;
top: 0;
width: 80%;
height: 100%;
}
button {
background-color: Transparent;
background-repeat: no-repeat;
border: none;
color: white;
}
</style>
</head>
<body>
<div id="select">
<h2>Select your country:</h2>
<xsl:for-each select="countries/country">
<button style="display: block;" id="mySelect" onclick="myFunction()">
<xsl:value-of select="name"/>
<xsl:attribute name="value">
<![CDATA[ <h1 style="color:#]]>
<xsl:value-of select="color"/>
<![CDATA[ "> ]]>
<xsl:value-of select="name"/>
<![CDATA[ </h1> ]]>
<![CDATA[ <p>]]>
<xsl:value-of select="name"/> has a population of
<xsl:value-of select="format-number(population,'#,000')"/>. Their currency is called the
<xsl:value-of select="currency"/> and their spoken language is
<xsl:value-of select="official_language"/> Their capital is called
<xsl:value-of select="capital"/>
<![CDATA[</p><p> ]]>
<xsl:value-of select="interesting_fact"/>
<![CDATA[ </p> ]]>
</xsl:attribute>
</button>
</xsl:for-each>
</div>
<div id="demo"/>
<script>
function myFunction() { var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = x; }
</script>
</body>
</html>
</xsl:template>undefined
</xsl:stylesheet>
xml:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="final.xsl" ?>
<countries>
<country>
<name>Brazil</name>
<population>208733102</population>
<currency>Real</currency>
<official_language>Portuguese</official_language>
<capital>Brasilia</capital>
<interesting_fact>Brazil's large territory comprises different ecosystems, such as the Amazon rainforest, recognized as having the greatest biological diversity in the world, with the Atlantic Forest and the Cerrado, sustaining the greatest biodiversity.[172] In the south, the Araucaria pine forest grows under temperate conditions. The rich wildlife of Brazil reflects the variety of natural habitats. Scientists estimate that the total number of plant and animal species in Brazil could approach four million, mostly invertebrates.</interesting_fact>
<color>379e4d</color>
</country>
<country>
<name>United Kingdom</name>
<population>65648100</population>
<currency>Pound sterling</currency>
<official_language>English</official_language>
<capital>London</capital>
<interesting_fact>The UK has a parliamentary government based on the Westminster system that has been emulated around the world: a legacy of the British Empire. The parliament of the United Kingdom meets in the Palace of Westminster and has two houses: an elected House of Commons and an appointed House of Lords. All bills passed are given Royal Assent before becoming law.</interesting_fact>
<color>d1361b</color>
</country>
<country>
<name>United States of America</name>
<population>325719178</population>
<currency>Dollar</currency>
<official_language>English</official_language>
<capital>Washington D.C.</capital>
<interesting_fact>The United States had the highest prison population rate in the world, at 716 per 100,000 people. More than half the 222 countries and territories in the World Prison Population List, by the U.K.-based International Center for Prison Studies, had rates below 150 per 100,000.</interesting_fact>
<color>282a7f</color>
</country>
<country>
<name>China</name>
<population>1403500365</population>
<currency>Yuan</currency>
<official_language>Standard Chinese</official_language>
<capital>Beijing</capital>
<interesting_fact>Archaeological evidence suggests that early hominids inhabited China between 2.24 million and 250,000 years ago. The hominid fossils of Peking Man, a Homo erectus who used fire, were discovered in a cave at Zhoukoudian near Beijing; they have been dated to between 680,000 and 780,000 years ago. The fossilized teeth of Homo sapiens (dated to 125,000–80,000 years ago) have been discovered in Fuyan Cave in Dao County, Hunan. Chinese proto-writing existed in Jiahu around 7000 BCE, Damaidi around 6000 BCE, Dadiwan from 5800–5400 BCE, and Banpo dating from the 5th millennium BCE.</interesting_fact>
<color>f92713</color>
</country>
</countries>
非常感谢任何帮助!
最佳答案
我做了一些更改，您可以在下面的代码更改中找到您的解决方案。
<?xml version='1.0' encoding='UTF-8' ?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<style>
#select {
position: absolute;
left: 0;
top: 0;
background-color: black;
width: 20%;
height: 100%
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
}
a {
color: white;
}
#demo {
position: absolute;
left: 20%;
top: 0;
width: 80%;
height: 100%;
}
button {
background-color: Transparent;
background-repeat: no-repeat;
border: none;
color: white;
}
</style>
</head>
<body>
<div id="select">
<h2>Select your country:</h2>
<xsl:for-each select="countries/country">
<button style="display: block;" id="mySelect" onclick="myFunction(this)">
<xsl:attribute name="name">
<xsl:value-of select="name"/>
</xsl:attribute>
<xsl:attribute name="value">
<xsl:value-of select="name"/>
<![CDATA[ <h1 style="color:]]>
<xsl:value-of select="color"/>
<![CDATA[ "> ]]>
<xsl:value-of select="name"/>
<![CDATA[ </h1> ]]>
<![CDATA[ <p>]]>
<xsl:value-of select="name"/> has a population of
<xsl:value-of select="format-number(population,'#,000')"/>. Their currency is called the
<xsl:value-of select="currency"/> and their spoken language is
<xsl:value-of select="official_language"/> Their capital is called
<xsl:value-of select="capital"/>
<![CDATA[</p><p> ]]>
<xsl:value-of select="interesting_fact"/>
<![CDATA[ </p> ]]>
</xsl:attribute>
<xsl:value-of select="name"/>
</button>
</xsl:for-each>
</div>
<div id="demo"/>
<script>
function myFunction(clicked_object)
{
var x = clicked_object.getAttribute('value');
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
下面的片段是输出:
关于javascript - 单击按钮时如何调用此函数？ (Javascript、XSLT、XML、HTML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50011983/