如何使用 onClick 在 function 中编写或替换 url？

Question

I'm new to javascript and I'm having a particularly difficult time figuring out how write new urls into an existing function using onClick.

Here is some more info:

I want to have something like this

   <script type="text/javascript">

    function addurl(){
    "server": [
                 {
                    "position": "center",
                    "url": "New_Url"
                 }
              ]
                     }
    </script>

    <div id="urlbutton"></div>
    <input type="button" onclick="????" value="url123">

Basically I want to replace the "url" when clicking different buttons/links. I've spent hours and hours today trying to figure this out and now I'm basically all turned around not knowing what to do.

Any type of help will be greatly appreciated!

Answer 1

The contents of your function should be a series of statements; your sample is more like (almost) an object literal. So that won't run.

Intially I'll ignore your almost object literal because I don't understand what you're trying to do. Instead, here are two ways that a button can call a function to set the url of the page, ie, cause the browser to navigate away from the current page to that URL. The first you pass the URL to the function. The second you pass a reference to the button to the function and then from that reference access the button's 'value' attribute. Plus I've given a way to set the URL without a function.

Note: I'm not sure that any of these is necessarily a sensible thing to do on a webpage. If you want to navigate to another URL use an <a> tag so that it will work for users with no JavaScript. But anyway...

function addUrl(newUrl) {
   window.location.href = newUrl;
}
function addUrl2(btn) {
   window.location.href = btn.value;
}

<input type="button" value="My URL" onclick="addUrl('someURL');">
<input type="button" value="www.google.com" onclick="addUrl2(this);">
<input type="button" value="Something" onclick="window.location.href='www.google.com';">

If what you're really trying to do is update some data structure then maybe something more like this (assumes your data object has a "server" property that is an array of url objects, like you seemed to be trying to do in your original function):

var myData = {
   "server": [ {"position": "center",
                "url": "New_Url"   } ]
};

function addUrl(newUrl) {
   myData["server"].push{"position":"center",
                         "url" : newUrl});
}
function updateUrl(index,newUrl) {
   myData["server"][index]["url"] = newUrl;
} 

Answer 2

Been a month since I used Javascript, but here it goes... I found a website that might be able to help you out. It appears older, but works.

The link is here: http://www.htmlgoodies.com/tutorials/buttons/article.php/3478871/So-You-Want-A-Link-Button-Huh.htm

This is what he suggests:

    <FORM>
    <INPUT TYPE="button" onClick="parent.location='page.html'">
    </FORM>

Just change out the "page.html" with the URL of the page you want to click and go to. I won't get into the concept of JavaScript here, but if you're willing to learn more, see my JavaScript primers.

Hope this helps.

Answer 3

Try this

 <script type="text/javascript">

    function addurl(newUrl){
    "server": [
                 {
                    "position": "center",
                    "url": newUrl
                 }
              ]
                     }
    </script>

 <input type="button" onclick="addUrl();" value="url123">