javascript - 如何通过JS用字符串替换当前URL参数

Question

我在使用 Campaign URL builder 时遇到了一个小问题。我有单独的字段，这些字段在 JS 中检查参数，然后添加到字符串中。这是从该字段收集数据的 js 代码：

function generateLink(e){
     e.preventDefault();
     let finalURL = '';
     check = [];
     shouldContain =  ["BaseURL", "Source", "Medium", "Campaign"];
     Object.keys(urlParameters).forEach(key=>{
       if(urlParameters[key] != ""){
        check.push(key);
        finalURL += urlParameters[key]+"&";
       }
       }
     });
     // check all url parameters are there and generate link
     if(checker(check, shouldContain) && check.length >= 4){
      document.getElementById('result').style.display = 'block';
      document.getElementById('finalURL').textContent = finalURL.slice(0,-1).replace(/ /g,"_").toLowerCase();
      var str = document.getElementById('finalURL').value;
        console.log(str);
     } else {
         document.getElementById('result').style.display = 'block';
         document.getElementById('finalURL').textContent = "Text";
     }
    }

问题是，一旦 URL 数据已经在块中， else （上面提到的）不会用“文本”替换 finalURL 值。如何让它一直工作？

检查器内部是否有任何问题？

PS：以下页面的HTML：

<main>
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-lg-6">
      <h2>Required Fields</h2>
      <form>
        <div class="form-group">
          <label for="baseURL">BaseURL</label>
          <textarea class="form-control" id="baseURL" rows="3"
            placeholder="i.e. https://www.parliament.uk/example"></textarea>
            <p class="error-message" id="baseURLError" style="margin:0; font-size: 17px;"></p>
        </div>
      </form>
       <form action="">
           <label for="channel" style="display: block;margin: 0 0 5px 0;font-size: 1.25rem;line-height: 1.5;color: #4d4d4d;">Channel</label>
        <div class="input-group">
          <select class="custom-select" id="channel">
            <option selected>Select an option...</option>
            <option value="Paid Search" id="PaidSearch">Paid Search</option>
            <option value="QR Code" id="QR_Code">QR Code</option>
          </select>
        </div>
        <p class="error-message" id="channelError" style="margin:0; font-size: 17px;"></p>
       </form>
      <form>
        <label for="source">Source</label>
        <div class="input-group">
          <select class="custom-select" id="source">
            <option selected>Select an option...</option>
          </select>
        </div>
        <p class="error-message" id="sourceError" style="margin:0; font-size: 17px;"></p>
      </form>
      <form>
        <label for="medium">Medium</label>
        <div class="input-group">
          <select class="custom-select" id="medium">
              <option selected>Select an option...</option>
          </select>
        </div>
        <p class="error-message" id="mediumError" style="margin:0; font-size: 17px;"></p>
      </form>
      <form>
        <div class="form-group">
          <label for="campaign">Campaign</label>
          <input type="text" class="form-control" id="campaign" placeholder="i.e. fac-kurdish-campaign" required>
          <p class="error-message" id="campaignError" style="margin:0; font-size: 17px;"></p>
        </div>
      </form>
    </div>
    <!--end column-->
    <div class="d-none d-lg-block col-lg-6">
      <h2>Term Explainer</h2>
      <table class="table">
        <thead>
          <tr>
            <th>Term</th>
            <th>Type</th>
            <th>Purpose</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>BaseURL</td>
            <td>Required</td>
            <td>This is the actual URL that directs to a page on the website</td>
          </tr>
          <tr>
            <td>Source</td>
            <td>Required</td>
            <td>The source is the platform on which the URL is being served (Facebook, Twitter, email etc.)</td>
          </tr>
          <tr>
            <td>Medium</td>
            <td>Required</td>
            <td>The way in which the URL is being served</td>
          </tr>
          <tr>
            <td>Campaign</td>
            <td>Required</td>
            <td>This is unique to each item being promoted and will change every time.</td>
          </tr>
          <tr>
            <td>Term</td>
            <td>Optional</td>
            <td>This is unique to each item being promoted and will change every time.</td>
          </tr>
          <tr>
            <td>Campaign</td>
            <td>Optional</td>
            <td>This is unique to each item being promoted and will change every time.</td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!--end row-->
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <h2>Optional Fields</h2>
      <form>
        <label for="term">Term</label>
        <div class="input-group">
          <select class="custom-select" id="term">
            <option selected>Select an option...</option>
            <option value="First">First</option>
            <option value="Second">Second</option>
            <option value="Third">Third</option>
            <option value="Fourth">Fourth</option>
            <option value="Fifth">Fifth</option>
            <option value="Sixth">Sixth</option>
            <option value="Seventh">Seventh</option>
          </select>
        </div>
      </form>
      <form>
        <label for="content">Content</label>
        <div class="input-group">
          <select class="custom-select" id="content">
            <option selected>Select an option...</option>
          </select>
        </div>
      </form>
      <button class="btn btn-primary" id="GetLink" style="background-color: #2546B1;">Get Link</button>
    </div>
    <!--end column-->
  </div>
  <!--end row-->
  <div class="row">
  <div class="col-md-8 col-sm-12">
    <div id="result">
      <h2>UTM Link</h2>
      <form>
        <div class="form-group">             
          <textarea class="form-control" id="finalURL" rows="6"></textarea>
        </div>
        
      </form>
    </div>
  </div>
  </div>
</div>
<!--end container-->

非常感谢您的任何帮助或建议，