Javascript 单击时更改按钮的值

我有一个笑话列表，我想显示在一个盒子里。加载页面时，我希望在框中随机显示一个页面。然后，当我单击该框时，我希望它再次将该值更改为列表中的另一个随机值

目前，我只是无法让它工作，也无法找出我哪里出了问题。我的HTML格式如下：

<input class="box" type="button" value"" />
<ul>
    <li>How much do pirates pay to get their ear pierced? &lt;/br&gt; A buck anear!</li>
    <li>How do pirates talk to one another? &lt;/br&gt; Aye to aye!</li>
    <li>What did the sea say to the pirate captain? &lt;/br&gt; Nothing, it justwaved!</li>
    <li>What is a pirates favourite shop? &lt;/br&gt; Ar-gos!</li>
    <li>When is it the best time for a pirate to buy a ship? &lt;/br&gt; Whenit is on sail!</li>
</ul>

有人可以告诉我如何使按钮有一个值时，页面加载，然后改变值时，按钮被点击

---

Fiddle:

您不需要加载jQuery对象来设置值。另外，您的

randomitem

需要明确地获取

li

元素的

innerText

$(document).ready(function () {

    var list = $("ul li").toArray();
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list[randomnum].innerText;

    $('.box').click(function () {
        this.value = randomitem;
    });
});

替代品

$(this).val(randomitem);

与：

附言：甚至更好

$(document).ready(function () {

    var list = $("ul li");
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list.eq(randomnum);

    $('.box').click(function () {
        this.value = randomitem.text();
    });
});

PPS：如果你想让按钮成为一个div，你也可以这样做：

$(document).ready(function () {

    var list = $("ul li");
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list.eq(randomnum);

    $('.box').click(function () {
        $(this).html(randomitem.text());
    });
})

---

只需确保更改div的样式，因为它看起来与输入的样式不同。

您有两个问题

首先，您总是选择相同的笑话（在加载页面时确定）。第二个是将整个

li

元素添加到按钮的值中

试试这个：

$(document).ready(function () {
    var list = $("ul li").toArray();
    var elemlength = list.length;

    $('.box').click(function () {
        // get a new joke every time a button is clicked
        var randomnum = Math.floor(Math.random() * elemlength);
        var randomitem = list[randomnum].innerHTML; // use the HTML of the <li>
        $(this).val(randomitem);
    });
});

$（文档）.ready（函数（）{
变量列表=$（“ul li”）.toArray（）；
var elemllength=list.length；
$（'.box'）。单击（函数（）{
//每次点击一个按钮都会得到一个新的笑话
var randomnum=Math.floor（Math.random（）*elemlength）；
var randomitem=list[randomnum].innerHTML；//使用
$（此）.val（随机项）；
});
});

---

实例：

您应该对代码进行一些更改：

• 每次单击按钮时生成随机值。在代码中，随机值只生成一次
• 单击按钮时指定元素文本，而不是元素本身
• 设置初始值

函数中的随机生成和赋值封装将在代码中发挥巨大作用。此代码正在运行（可以在以下位置运行）：

试试这把小提琴（这是你的叉子）：

HTML（更新）：

---

如果我想把这个按钮变成一个div，我能做到吗@Antur123我想Jan Hančič已经回答了这个问题，：-）就像他说的，单击事件处理程序可以工作，只需更改

$（元素）.val（…）

by

$（元素）.text（…）

就可以了。如果我想把按钮变成一个div，我可以这样做吗@cheeseweaselYou必须将

this.value=randomitem

更改为

this.innerText=randomitem

如果我想将按钮设为div，我可以这样做吗@Jan Hancic当然，单击处理程序是相同的。您只需要使用.html（）而不是.val（），如果我想将按钮设为div，可以吗@nemesisdesign你有小提琴吗？因为当我把它放进去时，它只在第一次点击@nemesisdesign时起作用

$(document).ready(function () {

    var list = $("ul li");
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list.eq(randomnum);

    $('.box').click(function () {
        $(this).html(randomitem.text());
    });
})

$(document).ready(function () {
    var list = $("ul li").toArray();
    var elemlength = list.length;

    $('.box').click(function () {
        // get a new joke every time a button is clicked
        var randomnum = Math.floor(Math.random() * elemlength);
        var randomitem = list[randomnum].innerHTML; // use the HTML of the <li>
        $(this).val(randomitem);
    });
});

$(document).ready(function () {
    var list = $("ul li").toArray();
    var elemlength = list.length;

    // Encapsulate random value assignment within a function
    var setRandomValue = function(element) {
            var randomnum = Math.floor(Math.random() * elemlength);
            var randomitem = list[randomnum];
            $(element).val($(randomitem).text());
    }

    // Bind click button
    $('.box').click(function () {
        setRandomValue(this);
    });

    // Set random value for the first time
    setRandomValue($('.box'));
});

<input class="box" type="button" value="Value at page load" />

$(document).ready(function () {

  $('.box').click(function () {

    var $items = $("ul li"),
        list = $items.toArray(),
        elemlength = list.length,
        randomnum = Math.floor(Math.random() * elemlength);

     $(this).val($items.eq(randomnum).text());
  });
});