使用onclick的单参数Javascript函数

我是javascript的新手，我需要帮助！我需要创建一个

函数changeColor（newColor）{}

，其中

changeColor

是函数的名称，

newColor

是传递给函数的唯一参数（无法更改此参数，我只能在函数中使用单个参数）。我有一个代表不同颜色的无序列表。例如：

<li><a href="#" >black</a></li>
<li><a href="#" >blue</a></li>
<li><a href="#" >red</a></li> etc.

任何帮助都将不胜感激。我知道如何分别完成这三件事，但我不知道如何在同一个函数中使用一个参数同时完成这三件事

*编辑当前代码* HTML:

---

我会这样做

<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">blue</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">black</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">yellow</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">green</a></li>

编辑

根据注释对javascript进行轻微修改

function changeColor(color)
    {
        var black = "here is the text that goes to the right of the black picture"; 
        var blue = "here is the text that goes to the right of the blue"; 
        //etc

        var textToShowInParagraph;
        document.getElementById('styleSheet').setAttribute('href', color + '.css');
        document.getElementById('selectedImg').setAttribute('src', color + '.jpg');

        if (color === 'black')
        {
             textToShowInParagraph = black;
        }
        else if (color === 'blue')
        {
              textToShowInParagraph = blue;
        } else if //con....

        document.getElementById('facts').childNodes[0].nodeValue = textToShowInParagraph;

    }

或者使用switch语句

 function changeColor(color)
        {
            var black = "here is the text that goes to the right of the black picture"; 
            var blue = "here is the text that goes to the right of the blue"; 
            //etc

            var textToShowInParagraph;
            document.getElementById('styleSheet').setAttribute('href', color + '.css');
            document.getElementById('selectedImg').setAttribute('src', color + '.jpg');

            switch (color) {
                case "black":
                    textToShowInParagraph = black;
                    break;
                case "blue":
                    textToShowInParagraph = blue;
                    break;
                //con..
                default:
                    break;
             }

            document.getElementById('facts').childNodes[0].nodeValue = textToShowInParagraph;

        }

或者，您可以使用一些局部对象变量作用域来执行与第一个类似的操作，其中变量是包含函数的属性，而不是窗口的属性（但基于非常奇怪的限制，这可能对您来说太远了-不确定？？）

乙二醇

基于当前代码编辑从问题编辑

首先，我不会将颜色值存储在标签的href中。浏览器希望找到一个有效的url或锚（即或#页脚）。Putting#是OK，这将导致空锚导航（即，单击不会到达任何地方）。因此，第一点将a标记更改为以下内容

<a href="#" onclick="changeColor(this)">yellow</a>

有几件事需要注意。如果对setAttribute的任何调用失败，那么函数的其余部分很可能会失败。此外，如果元素中没有文本，您将没有.childNode[0].nodeValue，则必须使用appendChild创建子节点

另外，我想向您介绍JSFIDLE，一个web开发人员的小沙箱，实验工具

为了进一步阐述，我为您做了一个小测试，在chrome和firefox中进行测试，效果很好。不完全是您需要的代码，但是（即，没有任何样式表或图像需要更改），但原则是相同的。链接如下：

---

撰写问题时会有一个预览。请花一些时间并格式化它来更改样式表，我这样做了，效果很好：function changeColor（newColor）{var stylesheet=document.getElementById（'stylesheet'）；stylesheet.setAttribute（'href'，newColor）；对图像和文本也做了基本相同的事情，我使用了facts.firstChild.nodeValue=表示颜色的变量。我只是不知道如何用一个onclick事件同时完成这三件事。}既然你知道如何“分别完成这三件事”，我就从这里开始。分别实现每个需求，然后看看如何将它们集成在一起以满足您的需求。如果您被卡住了，请回到这里发布代码，我们将很乐意帮助您解决问题！然而，当您的努力不明显时，您会发现很难在这里得到“从开始到完成”的答案（至少应该有代码演示和一些与代码相关的特定问题，而不是一般要求/规范）。祝你好运当然，这取决于您，但是使用类似于

body.blue div{…}

或

body.green p{…}

的规则创建一个样式表可能更简单。然后，您只需单击更改

body

元素的类，而无需加载外部工作表。一开始下载量比较大，但是没有更多的往返，也没有延迟。好吧，如果我这样设置我的函数：function changeColor（newColor）{var styleSheet=document.getElementById（'styleSheet'）；styleSheet.setAttribute（'href'，newColor）；}如果我将其添加到html中，这将以我需要的方式更改样式：

等。现在如何添加其他两个事件？（我还有更多的工作要做）…谢谢OJay的帮助。然而，我不能使用innerHTML，因为我们还没有研究过它。我只能使用函数加上一个循环来分配'facts'元素的值是的，尽管你可能会说，你可以使用document.getElementById（'facts'）.childNodes[0].nodeValue=window[color]，我会编辑我的答案我也不能使用window[color]。我可以使用getElementById（'facts'），但我不知道如何构造循环，以便将var值分配给文本。变量必须在函数内部。因此有一个var black=“text for black”；var blue=“蓝色文本”；函数内部的等。我需要使用循环语句或if-else语句为具有“facts”元素id的段落指定正确的颜色文本。我知道如何分别完成问题的前两部分，但我不知道如何将它们组合到一个onclick事件中。您肯定已经回答了问题的最后一部分？Ojay，什么意思？我可以知道如何更改样式表引用，也可以知道如何更改图像引用，但只能单独更改。如果我尝试同时执行这些操作，则只有第二个onclick操作有效。至于文本替换，我不知道该怎么做。

<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">blue</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">black</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">yellow</a></li>
<li><a href="#" onclick="changeColor(this.childNodes[0].nodeValue)">green</a></li>

var black = "here is the text that goes to the right of the black picture"; 
var blue = "here is the text that goes to the right of the blue"; 
//etc
function changeColor(color)
{

    document.getElementById('styleSheet').setAttribute('href', color + '.css');
    document.getElementById('selectedImg').setAttribute('src', color + '.jpg');
    document.getElementById('facts').innerHTML = window[color];

}

function changeColor(color)
    {
        var black = "here is the text that goes to the right of the black picture"; 
        var blue = "here is the text that goes to the right of the blue"; 
        //etc

        var textToShowInParagraph;
        document.getElementById('styleSheet').setAttribute('href', color + '.css');
        document.getElementById('selectedImg').setAttribute('src', color + '.jpg');

        if (color === 'black')
        {
             textToShowInParagraph = black;
        }
        else if (color === 'blue')
        {
              textToShowInParagraph = blue;
        } else if //con....

        document.getElementById('facts').childNodes[0].nodeValue = textToShowInParagraph;

    }

 function changeColor(color)
        {
            var black = "here is the text that goes to the right of the black picture"; 
            var blue = "here is the text that goes to the right of the blue"; 
            //etc

            var textToShowInParagraph;
            document.getElementById('styleSheet').setAttribute('href', color + '.css');
            document.getElementById('selectedImg').setAttribute('src', color + '.jpg');

            switch (color) {
                case "black":
                    textToShowInParagraph = black;
                    break;
                case "blue":
                    textToShowInParagraph = blue;
                    break;
                //con..
                default:
                    break;
             }

            document.getElementById('facts').childNodes[0].nodeValue = textToShowInParagraph;

        }

function changeColor(color)
{
    this.black = "here is the text that goes to the right of the black picture"; 
    this.blue = "here is the text that goes to the right of the blue"; 
    //etc       

    document.getElementById('styleSheet').setAttribute('href', color + '.css');
    document.getElementById('selectedImg').setAttribute('src', color + '.jpg');
    document.getElementById('facts').childNodes[0].nodeValue = this[color];
 }

<a href="#" onclick="changeColor(this)">yellow</a>

function changeColor(callingATag) {

    //get the newColor from the calling a tags child text node
    var newColor = callingATag.childNodes[0].nodeValue;

    //set the stylesheet href
    document.getElementById('styleSheet').setAttribute('href', newColor + '.css');
    // No need to set variables, can do it in one line, and the return value from 
    // setAttribute is undefined anyway

    // Set the img src attribute
    document.getElementById('selectedImg').setAttribute('src', newColor + '.jpg');
    //Same as above

    //Color text description variables fine
    var black = //etc.. etc.. con...

    //Color test to set text - fine but NOTE you had not declared the 
    // factsText variable, and in you code you don't do 
    // anything with it afterwards
    var factsText;
    if (newColor === 'black') {
        factsText = black;
    //etc.. etc..

    //then set the facts element text
    document.getElementById('facts').childNodes[0].nodeValue = factsText;

}