Below is js code on what i am trying to make a button in html. It used getelementbyid . I am learning js. and i don't know what else i can do it fix this. By this method. i want to make a wordpress plugin to place a button on sidebar to open html pages of that current page.
const DEFAULT_URL = "https://www.hashhackers.com/use-google-amp-cdn-links-reduce-hosting-resources/amp";
const AMP_CACHE_PREFIX = "https://cdn.ampproject.org/c/";
class AmpUrlConverter {
constructor(root, ampUrlFactory) {
this.inputView = root.getElementById('input');
this.resultView = root.getElementById('result');
this.ampUrlFactory = ampUrlFactory;
root.getElementById('execute')
.addEventListener("click", this.onClick.bind(this));
}
setInput(urlString) {
this.inputView.value = urlString;
this.convert(urlString);
}
convert(urlString) {
urlString = urlString.trim();
if (!urlString) {
this.showError('Empty input');
return;
}
if (!/^http[s]?\:\/\//i.test(urlString)) {
urlString = 'http://' + urlString;
this.inputView.value = urlString;
}
try {
const ampUrl = this.ampUrlFactory.createAmpUrl(urlString);
const proxyUrl = ampUrl.getProxyUrl();
this.showResult('<a href="' + proxyUrl + '" target="_blank">' + proxyUrl + '</a>');
}catch(e) {
this.showError('Invalid URL');
}
}
showError(message) {
this.resultView.className = 'error';
this.resultView.innerHTML = message;
}
showResult(result) {
this.resultView.className = '';
this.resultView.innerHTML = result;
}
onClick() {
this.convert(this.inputView.value);
}
}
function getParameterByName(name, defaultValue) {
const url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) { return defaultValue; }
if (!results[2]) { return defaultValue; }
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
const proxyUrlPrefix = 'https://cdn.ampproject.org';
const javascriptVersion = '5';
const useCurlsEncoding = true;
const ampUrlFactory =
new AmpUrlFactory(proxyUrlPrefix, javascriptVersion, useCurlsEncoding);
const converter = new AmpUrlConverter(document, ampUrlFactory);
const initialUrl = window.location.href + "/amp/";
converter.setInput(initialUrl);
currently i am printing it using these elements, and its a link
<section class="result-container">
<pre id="result"></pre>
</section>
i want to change it into a button where on click it should open the link but full url shouldn't be shown.
i tried this
<input type="button" name="Click" onclick="window.location = getElementById('result')" value="Click Here">