我正在做一个小项目，以帮助我的RPG游戏中的玩家能够使用下拉列表选择某些优势（技能），并在页面上显示其描述。到目前为止，我的尝试是业余的，但几乎给了我预期的结果。
我的问题是我无法弄清楚如何以所需的格式（如段落和间距）从数组中显示文本，因此它不仅仅是一堵墙。
到目前为止，我的研究一直都导致php解决方案，并且作为编码的新手，我宁愿现在不必为此项目研究一个全新的主题。 有没有办法使用HTML，CSS或Javascript实现此目的？ 有没有办法使某些单词为粗体，斜体等？
到目前为止，对此代码没有任何其他建议/批评。干杯。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GCRC Advantages</title>
</head>
<body>
<header>
<h1>Advantages</h1>
</header>
<main>
<h3>A.</h3>
<form method="GET">
<select name="user-advantages-a" id="user-advantages-a">
<option value="absolute direction">Absolute Direction</option>
<option value="absolute timing">Absolute Timing</option>
<option value="acute senses">Acute Senses</option>
</select>
<input id="submit-advantage-a" type="submit"/>
</form>
<h3>B.</h3>
<form method="GET">
<select name="user-advantages-b" id="user-advantages-b">
<option value="binding">Binding</option>
<option value="blessed">Blessed</option>
<option value="brachiator">Brachiator</option>
</select>
<input id="submit-advantage-b" type="submit" />
</form>
<h3>C.</h3>
<form method="GET">
<select name="user-advantages-c" id="user-advantages-c">
<option value="catfall">Catfall</option>
<option value="chameleon">Chameleon</option>
<option value="channeling">Channeling</option>
</select>
<input id="submit-advantage-c" type="submit" />
</form>
<h3>D.</h3>
<form method="GET">
<select name="user-advantages-d" id="user-advantages-d">
<option value="Damage Resistance">Damage Resistance</option>
<option value="Danger Sense">Danger Sense</option>
<option value="Daredevil">Daredevil</option>
</select>
<input id="submit-advantage-d" type="submit" />
</form>
<script type="text/javascript" src="GCRC.js"></script>
<hr>
<h1>Results</h1>
<advantages>
<ad1></ad1>
<br>
<ad2></ad2>
<br>
<ad3></ad3>
<br>
<b1></b1>
<br>
<b2></b2>
<br>
<b3></b3>
</advantages>
</main>
</body>
</html>
我的Javascript代码
/......A
document.getElementById("submit-advantage-a").addEventListener("click", function (e) {
e.preventDefault();
let userAdvantage = document.getElementById('user-advantages-a').value;
if (userAdvantage === 'absolute direction') {
document.querySelector("ad1").innerText = adArrayA[0];
} else if (userAdvantage === 'absolute timing') {
document.querySelector("ad2").innerHTML = adArrayA[1];
} else if (userAdvantage === 'acute senses') {
document.querySelector("ad3").innerHTML = adArrayA[3];
}
});
//.......B
document.getElementById("submit-advantage-b").addEventListener("click", function (e) {
e.preventDefault();
let userAdvantage = document.getElementById('user-advantages-b').value;
if (userAdvantage === 'binding') {
document.querySelector("b1").innerHTML = "****binding blah blah blah****";
}
});
const adArrayA = ['Absolute Direction: You have an excellent sense of direction. This ability comes in two levels: Absolute Direction: You always know which way is north, and you can always retrace a path you have followed within the past month, no matter how faint or confusing. This ability does not work in environments such as interstellar space or the limbo of the astral plane, but it does work underground, underwater, and on other planets. This gives +3 to Body Sense and Navigation (Air, Land, or Sea). (Note: The navigational sense that guides migratory creatures to their destination is too crude to qualify; treat it as a 0-point feature.) 5 points. 3D Spatial Sense: As above, but works in three dimensions. This ability is useful in deep space – although it does not help you if you travel across dimensions. You get the skill bonuses to Piloting and +2 to Aerobatics, Free Fall, and Navigation (Hyperspace or Space). 10 points.'];
