时间戳

首页 > 解决方案 > 在不影响其他元素的情况下更改卡片的标题

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

问题描述

我想更改每次用户在下拉列表中选择一个选项时Main Title的卡片标题。2nd 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，则只有主标题词可以看到跨度徽章并且图标消失。

标签： javascripthtmlselectiontitle

解决方案

这是工作代码：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";
  }
}

推荐阅读