在不影响其他元素的情况下更改卡片的标题

Question

我想更改卡片的标题，每次用户在下拉列表中选择一个选项时，该标题都会Main Title2nd Title。

这是我的代码。

.HTML：

<h3 id="title" class="card-title">Main Title <span class="badge badge-primary" id="counts">0</span>
<span class="float-right">
<a href="" style="color: #c0c6cc;"><i 
class="mdi mdi-trash-can"></i>
</a>
</span>
</h3>
<select class="form-control" id="select" onchange="optionCheck(this);" required>
<option value="yor1" Option 1 </option>
<option value="yor2">
Option 2</option>
<option value="yor3">
Option 3</option>
</select>

如果用户选择选项 3，则卡片的标题将更改。

.JS：

function optionCheck(that) {
if (that.value == "yor3") {
alert("Title changed!");
document.getElementById("title").innerHTML = "2nd Title";
} else {
document.getElementById("title").innerHTML = "Main title";
}
}

现在的问题是，如果我选择选项1或2，则只有主标题词可以看到跨度徽章并且图标消失。

Answer 1

您可以将内容放在span中，并将该 idtitle提供给 span 标记，以便仅更改 span 内的内容。

演示代码：

function optionCheck(that) {
if (that.value == "yor3") {
alert("Title changed!");
document.getElementById("title").innerHTML = "2nd Title";
} else {
document.getElementById("title").innerHTML = "Main title";
}
}

<!--added id to span tag-->
<h3 class="card-title"><span id="title">Main Title</span> <span class="badge badge-primary" id="counts">0</span>
<span class="float-right">
<a href="" style="color: #c0c6cc;"><i 
class="mdi mdi-trash-can"></i>
</a>
</span>
</h3>
<select class="form-control" id="select" onchange="optionCheck(this);" required>
<option value="yor1"> Option 1 </option>
<option value="yor2">
Option 2</option>
<option value="yor3">
Option 3</option>
</select>

Answer 2

这是工作代码： https://jsfiddle.net/usmanmunir/c9uqktn3/19/

.HTML

<h3 id="title" class="card-title">Main Title</h3>
<span class="badge badge-primary" id="counts">0</span>
<span class="float-right">
<a href="" style="color: #c0c6cc;">
<i class="mdi mdi-trash-can"></i></a>
</span>
<br>
<select class="form-control" id="select" onchange="optionCheck(this);" required>
<option disabled selected></option>
<option value="yor1">Option 1</option>
<option value="yor2">Option 2</option>
<option value="yor3">Option 3</option>
</select>

.JS

function optionCheck(that) {
if (that.value === "yor1" || that.value === "yor2" || that.value === "yor3") {
document.getElementById("title").innerHTML = "2nd Title";
} else {
document.getElementById("title").innerHTML = "Main title";
}
}