使用Onclick运行一个函数来访问js

时间:2016-09-08 12:23:04

标签: javascript html arrays

我有一个脚本可以生成一段可行的随机文本。它随机地从数组中选择单词并创建连接到段落中的句子。

现在我希望能够从具有不同单词色调的不同数组中进行选择,以通过html文件中的列表形成段落。

我用不同的单词色调作为单独的属性创建了一个对象,它们的值是不同的数组。我通过将object.property传递给段落函数来测试它,并且这很有用。所以我知道我可以使用object.property传递给函数。

现在,我有一些我想要使用的列表元素,每个元素都可以选择不同的单词色调来填充段落。我想用onclick用if语句调用列表中的函数。这应该选择对象中的哪个属性传递给段落函数。

返回的ipsumText应该等于两个数组中的任何一个。 这不行。 这有用吗?任何人都可以建议我在代码中犯了什么错误。我无法解决这个问题。

<li onclick="flavourChoice(xx)”>choice one</li>
<li onclick="flavourChoice(yy)”>choice two</li>


<script>

var ipsumTextxx = [words here...]
var ipsumTextyy = [different words here...]

var ipsumTextFlavour = {
    xx: ipsumTextxx,
    yy: ipsumTextyy
}

function flavourChoice(choice) {
    if(choice === xx) {
        ipsumText = ipsumTextFlavour.xx;   
    } else {
        ipsumText = ipsumTextFlavour.yy;
    }

    return(ipsumText)
}

/* then use ipsumText to pass into the various functions that create the paragraphs */

</script>

2 个答案:

答案 0 :(得分:0)

<li onclick="flavourChoice(xx)”>choice one</li>

你看到角色?它应该是

<li onclick="flavourChoice(xx)">choice one</li>

如果xx不是对象,则应将其设为字符串:

<li onclick="flavourChoice('xx')">choice one</li>

在您的函数中使其成为字符串,然后使用generateParagraph()调用ipsumText函数。

function flavourChoice(choice) {
    var ipsumText = {};

    if(choice === 'xx') {
        ipsumText = ipsumTextFlavour.xx;   
    } else {
        ipsumText = ipsumTextFlavour.yy;
    }
    generateParagraphs(ipsumText);
}

答案 1 :(得分:0)

我将html中的linst链接更改为

<li onclick="flavourChoice('xx')">choice one</li>

经过一些研究后,我发现我可以在flavourChoice()函数中更简单地访问对象属性。

function flavourChoice(choice) {
    var ipsumText = ipsumTextFlavour[choice]; 
    console.log(ipsumText);

在原始代码中接下来是几个函数,这些函数导致一个最终函数传入ipsumText值并更改了HTML中的DOM元素。

我还在上面的函数中添加了所有这些内容。然后我调用了更新DOM的函数,这是有效的。我可以单击链接列表,每个链接都会更改用于生成段落的数组。