-4

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">
4
  • 2
    Hi, Stackoverflow is not a coding service. What have you tried so far? Aug 9, 2018 at 7:05
  • Please don't post pictures on code. Post the code in the question, so we can help
    – Olearn
    Aug 9, 2018 at 7:09
  • @AlenGenzić Updated. Check Aug 9, 2018 at 7:55
  • @Olearn added the code. please help now. Aug 9, 2018 at 7:55

1 Answer 1

0

you can set the location.href on onclick event

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

or

write a function and call it inside onclick

<input type="button" onclick="goToLink()" value="Go to Google" />

-- function --

function goToLink(){
window.location.href= "http://www.google.lk";
}
1
  • This is for basic. The url is dynamic. and js is used to modify it into another link. check code. post updated. Aug 9, 2018 at 7:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.