I faced a small issue while using Campaign URL builder. I have separate fields which are checked in JS for a parameter and then added to a string. Here's the js code which is collected the data from that fields:
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";
}
}
The question is that the else (mentioned above) is not replacing the finalURL value with the "Text" once the URL data is already in the block. How to make it work all the time?
Is there any issue inside the checker?
PS: The HTML of the page below:
<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-->
Many thanks in advance for any help or suggestion,
