-1

I have an html page that I run locally in the web browser, and in the code I have a series of links. The links are wrapped around buttons, and the buttons are styled using CSS. I frequently have to add links, so I would like to put a "new link creator" directly on the page and create a button based on a url entered into the box. Here are some of the links and the code around them:

<div class='m'>
    <a href='https://stackoverflow.com/' target='_blank'><input type='button' class='menu' value='Stack Overflow'></a>
    <a href='https://puzzling.stackexchange.com/' target='_blank'><input type='button' class='menu' value='Puzzling Stack Exchange'></a>
    <a href='https://pastebin.com/' target='_blank'><input type='button' class='menu' value='Pastebin'></a>
    <a href='https://github.com/' target='_blank'><input type='button' class='menu' value='GitHub'></a>
    <a href='https://scholar.google.com/' target='_blank'><input type='button' class='menu' value='Google Scholar'></a>
    <a href='https://google.com/' target='_blank'><input type='button' class='menu' value='Google'></a>
    <a href='https://encrypted.google.com/' target='_blank'><input type='button' class='menu' value='Encrypted Google'></a>
</div>

And here is the progress I've made so far on solving the problem (basically nothing):

<div class='tb'>
    <input type='text' id='get_url'></input>
    <input type='button' value='Create New Button' onclick='newbutton();'></input>
</div>

Which points to this JS:

function newbutton() {
    var url = document.getElementById('get_url');
    // ... make button with the given url
    }

any help is appreciated. if I need to include any more code (e.g. my CSS) just let me know in the comments.

JSFiddle

moon
  • 640
  • 6
  • 14
sam-pyt
  • 1,027
  • 15
  • 26

1 Answers1

1
function newbutton() {
    var div = document.querySelector('.m');
    var input = document.querySelector('#get_url');
    // ... make button with the given url

    var dom = '<a href="' + input.value + '" target="_blank">';
    dom += '<input type="button" class="menu" value="new button"></a>';

    div.innerHTML += dom;
}

Here's the code that can create new button element, but there're some steps you need to consider by yourself. It's just an one of basic ideas.

  1. URL formatting

The code above only recognizes the exact url, such as https://google.com. If the url isn't correct, the button wouldn't recognize it and redirect you to there. So, you should think of the algorithm for covering the all possible cases.

  1. Data wouldn't be saved.

Even though you've created a new button containing the new url, it's not going to be stored in your web, since the behavior of generating the new DOM is just from a function. Which means, your original HTML file does not include it by default. So, if you want to store it as well, you better consider the database or webStorage.

  1. There's a better way to create a DOM, instead of innerHTML

I've used innerHTML to create a DOM. However, what if there is/are better way(s)? Using innerHTML isn't really a good choice to make a DOM, even though it seems quite useful and handy. There're several reasons and you may check these links below. I am not going to explain all the differences deeply, since your question wasn't on it, but to just let you know. There're other options, so I recommend you to figure the differences out!

  • innerHTML
  • innerText
  • textContent
  • createElement()
  • createTextnode()
  • etc

in general, in javascript, isn't using innerHTML an [in]security issue?

innerText vs innerHtml vs label vs text vs textContent vs outerText

Security comparison of eval and innerHTML for clientside javascript?

moon
  • 640
  • 6
  • 14