Я работаю над небольшим проектом, чтобы помочь моим игрокам в ролевой игре иметь возможность использовать раскрывающиеся формы для выбора определенных преимуществ (навыков) и отображения их описаний на странице. До сих пор мои попытки были любительскими. sh Я знаю, но в значительной степени давая мне желаемые результаты.
Моя проблема в том, что я не могу понять, как отобразить текст из моего массива в желаемом формате, например абзацы и интервалы, так что это не просто стена текста.
Мои исследования до сих пор всегда приводили к php решениям, и, поскольку я новичок в кодировании, я бы предпочел не изучать совершенно новый предмет только для этого проекта на данный момент. Есть ли способ добиться этого с помощью HTML, CSS или Javascript? Есть ли способ выделить определенные слова жирным шрифтом, itali c et c?
Любые другие предложения / критические замечания по этому коду на данный момент приветствуются. Ура.
<!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.'];