我是JavaScript的新手，我试图找出如何将我拥有的按钮链接到我的功能。代码是各种各样的随机客户，所以我试图将按钮连接到我的代码，以便您可以按随机顺序点击不同的项目。
在尝试了大量不同的事情后，我似乎无法让它发挥作用。
非常感谢任何帮助。
<div class="container">
<div class="card fade-in">
<p id="randomStrategy"></p>
<script>
// Establish a variable, which pulls from an array.
var selectStrategy = [
"Abandon desire",
"Abandon normal instructions",
"Accept advice",
"Adding on",
"A line has two sides",
"Always the first steps",
"Ask people to work against their better judgement",
"Ask your body",
"Be dirty",
"Be extravagant",
"Be less critical",
"Breathe more deeply",
"Bridges -build -burn",
"Change ambiguities to specifics",
"Change nothing and continue consistently",
"Change specifics to ambiguities",
"Consider transitions",
"Courage!",
"Cut a vital connection",
"Decorate, decorate",
"Destroy nothing; destroy the most important thing",
"Discard an axiom",
"Disciplined self-indulgence",
"Discover your formulas and abandon them",
"Display your talent",
"Distort time",
"Do nothing for as long as possible",
"Don’t avoid what is easy",
"Don’t break the silence",
"Don’t stress one thing more than another",
"Do something boring",
"Do something sudden, destructive and unpredictable",
"Do the last thing first",
"Do the words need changing?",
"Emphasise differences",
"Emphasise the flaws",
"Faced with a choice, do both (From Dieter Rot.)",
"Find a safe part and use it as an anchor",
"Give the game away",
"Give way to your worst impulse",
"Go outside. Shut the door.",
"Go to an extreme, come part way back",
"How would someone else do it?",
"How would you have done it?",
"In total darkness, or in a very large room, very quietly",
"Is it finished?",
"Is something missing?",
"Is the style right?",
"It is simply a matter or work",
"Just carry on",
"Listen to the quiet voice",
"Look at the order in which you do things",
"Magnify the most difficult details",
"Make it more sensual",
"Make what’s perfect more human",
"Move towards the unimportant",
"Not building a wall; making a brick",
"Once the search has begun, something will be found",
"Only a part, not the whole",
"Only one element of each kind",
"Openly resist change",
"Pae White’s non-blank graphic metacard",
"Question the heroic approach",
"Remember quiet evenings",
"Remove a restriction",
"Repetition is a form of change",
"Retrace your steps",
"Reverse",
"Simple Subtraction",
"Slow preparation, fast execution",
"State the problem as clearly as possible",
"Take a break",
"Take away the important parts",
"The inconsistency principle",
"The most easily forgotten thing is the most important",
"Think -inside the work -outside the work",
"Tidy up",
"Try faking it (From Stewart Brand.)",
"Turn it upside down",
"Use an old idea",
"Use cliches",
"Use filters",
"Use something nearby as a model",
"Use ‘unqualified’ people",
"Use your own ideas",
"Voice your suspicions",
"Water",
"What context would look right?",
"What is the simplest solution?",
"What mistakes did you make last time?",
"What to increase? What to reduce? What to maintain?",
"What were you really thinking about just now?",
"What wouldn’t you do?",
"What would your closest friend do?",
"When is it for?",
"Where is the edge?",
"Which parts can be grouped?",
"Work at a different speed",
"Would anyone want it?",
"Your mistake was a hidden intention",
"Use fewer notes",
"Use filters",
"Use ‘unqualified’ people",
"Water",
"What are you really thinking about just now? Incorporate",
"What is the reality of the situation?",
"What mistakes did you make last time?",
"What would your closest friend do?",
"What wouldn’t you do?",
"Work at a different speed",
"You are an engineer",
"You can only make one dot at a time",
"You don’t have to be ashamed of using your own ideas",
// The following is where the randomness magic happens.
];
var pickAStrategy = function () {
var randomStrategy = selectStrategy[Math.floor(Math.random() * selectStrategy.length)];
return randomStrategy;
};
// This writes the strategy to the page.
document.getElementById("randomStrategy").innerHTML = pickAStrategy();
</script>
<INPUT TYPE=BUTTON VALUE="Click Me" onClick="pickAStrategy(document.randomStrategy);" id="button"></INPUT>
</div> <!-- /card -->
</div> <!-- /container -->
答案 0 :(得分：2)
我的答案太慢 - 但是在评论和其他答案中展示了什么，例如istrupin的“onClick =”pickAStrategy（）不应该接受任何参数。“，并应用一些更好的做法，我想出了这个 我也重命名了一些东西，以便更容易看到名称之间的区别。
首先，简化您的页面结构 - 从中获取代码（关注点分离）
<div class="container">
<div class="card fade-in">
<p id="randomStrategy"></p>
<input type="button" id="pickrandom" value="Click Me">
</div> <!-- /card -->
</div> <!-- /container -->
注意按钮上没有onClick=。更好的做法是使用代码本身附加事件的处理程序，如
document.getElementById('pickrandom').addEventListener('click', pickAStrategy);
pickAStrategy函数可以设置p id="randomStrategy"本身的内容，因此不需要返回任何内容。这将提供以下脚本块，您可以将其放在页面标记的 end 中。 （直到你学会在“DOM准备就绪”时附加代码）
<script>
document.getElementById('pickrandom').addEventListener('click', pickAStrategy);
function pickAStrategy()
{
var chosenStrategy = strategies[Math.floor(Math.random() * strategies.length)];
//console.log('chosen: ' + chosenStrategy);
document.getElementById('randomStrategy').innerHTML = chosenStrategy;
}
var strategies = [ ... ];
</script>
将所有内容放在一起，并添加一些样式，以便在填写之前可以看到randomStrategy的位置，并提供此代码as seen in this fiddle：
<style>
p#randomStrategy {
min-height: 14px;
min-width: 23px;
border: 1px dotted green;
}
</style>
<div class="container">
<div class="card fade-in">
<p id="randomStrategy"></p>
<input type="button" id="pickrandom" value="Click Me">
</div> <!-- /card -->
</div> <!-- /container -->
<script>
document.getElementById('pickrandom').addEventListener('click', pickAStrategy);
function pickAStrategy()
{
var chosenStrategy = strategies[Math.floor(Math.random() * strategies.length)];
//console.log('chosen: ' + chosenStrategy);
document.getElementById('randomStrategy').innerHTML = chosenStrategy;
}
var strategies = [
"Abandon desire",
"Abandon normal instructions",
"Accept advice",
"Adding on",
"A line has two sides",
"Always the first steps",
"Ask people to work against their better judgement",
"Ask your body",
"Be dirty",
"Be extravagant",
"Be less critical",
"Breathe more deeply",
"Bridges -build -burn",
"Change ambiguities to specifics",
"Change nothing and continue consistently",
"Change specifics to ambiguities",
"Consider transitions",
"Courage!",
"Cut a vital connection",
"Decorate, decorate",
"Destroy nothing; destroy the most important thing",
"Discard an axiom",
"Disciplined self-indulgence",
"Discover your formulas and abandon them",
"Display your talent",
"Distort time",
"Do nothing for as long as possible",
"Don’t avoid what is easy",
"Don’t break the silence",
"Don’t stress one thing more than another",
"Do something boring",
"Do something sudden, destructive and unpredictable",
"Do the last thing first",
"Do the words need changing?",
"Emphasise differences",
"Emphasise the flaws",
"Faced with a choice, do both (From Dieter Rot.)",
"Find a safe part and use it as an anchor",
"Give the game away",
"Give way to your worst impulse",
"Go outside. Shut the door.",
"Go to an extreme, come part way back",
"How would someone else do it?",
"How would you have done it?",
"In total darkness, or in a very large room, very quietly",
"Is it finished?",
"Is something missing?",
"Is the style right?",
"It is simply a matter or work",
"Just carry on",
"Listen to the quiet voice",
"Look at the order in which you do things",
"Magnify the most difficult details",
"Make it more sensual",
"Make what’s perfect more human",
"Move towards the unimportant",
"Not building a wall; making a brick",
"Once the search has begun, something will be found",
"Only a part, not the whole",
"Only one element of each kind",
"Openly resist change",
"Pae White’s non-blank graphic metacard",
"Question the heroic approach",
"Remember quiet evenings",
"Remove a restriction",
"Repetition is a form of change",
"Retrace your steps",
"Reverse",
"Simple Subtraction",
"Slow preparation, fast execution",
"State the problem as clearly as possible",
"Take a break",
"Take away the important parts",
"The inconsistency principle",
"The most easily forgotten thing is the most important",
"Think -inside the work -outside the work",
"Tidy up",
"Try faking it (From Stewart Brand.)",
"Turn it upside down",
"Use an old idea",
"Use cliches",
"Use filters",
"Use something nearby as a model",
"Use ‘unqualified’ people",
"Use your own ideas",
"Voice your suspicions",
"Water",
"What context would look right?",
"What is the simplest solution?",
"What mistakes did you make last time?",
"What to increase? What to reduce? What to maintain?",
"What were you really thinking about just now?",
"What wouldn’t you do?",
"What would your closest friend do?",
"When is it for?",
"Where is the edge?",
"Which parts can be grouped?",
"Work at a different speed",
"Would anyone want it?",
"Your mistake was a hidden intention",
"Use fewer notes",
"Use filters",
"Use ‘unqualified’ people",
"Water",
"What are you really thinking about just now? Incorporate",
"What is the reality of the situation?",
"What mistakes did you make last time?",
"What would your closest friend do?",
"What wouldn’t you do?",
"Work at a different speed",
"You are an engineer",
"You can only make one dot at a time",
"You don’t have to be ashamed of using your own ideas",
// The following is where the randomness magic happens.
];
</script>
答案 1 :(得分：1)
问题是您返回一个值，但没有将返回的值分配给任何DOM元素。基本上，您必须让您的函数使用document.getElementById("randomStrategy").innerHTML = randomStrategy;更改实际DOM。我还使特定的DOM元素在您单击按钮之前返回占位符值，但您可以更改该行为。
此外，您的onClick="pickAStrategy()"不应该接受任何参数。
试试这个：
// Establish a variable, which pulls from an array.
var selectStrategy = [
"Abandon desire",
"Abandon normal instructions",
"Accept advice",
"Adding on",
"A line has two sides",
"Always the first steps",
"Ask people to work against their better judgement",
"Ask your body",
"Be dirty",
"Be extravagant",
"Be less critical",
"Breathe more deeply",
"Bridges -build -burn",
"Change ambiguities to specifics",
"Change nothing and continue consistently",
"Change specifics to ambiguities",
"Consider transitions",
"Courage!",
"Cut a vital connection",
"Decorate, decorate",
"Destroy nothing; destroy the most important thing",
"Discard an axiom",
"Disciplined self-indulgence",
"Discover your formulas and abandon them",
"Display your talent",
"Distort time",
"Do nothing for as long as possible",
"Don’t avoid what is easy",
"Don’t break the silence",
"Don’t stress one thing more than another",
"Do something boring",
"Do something sudden, destructive and unpredictable",
"Do the last thing first",
"Do the words need changing?",
"Emphasise differences",
"Emphasise the flaws",
"Faced with a choice, do both (From Dieter Rot.)",
"Find a safe part and use it as an anchor",
"Give the game away",
"Give way to your worst impulse",
"Go outside. Shut the door.",
"Go to an extreme, come part way back",
"How would someone else do it?",
"How would you have done it?",
"In total darkness, or in a very large room, very quietly",
"Is it finished?",
"Is something missing?",
"Is the style right?",
"It is simply a matter or work",
"Just carry on",
"Listen to the quiet voice",
"Look at the order in which you do things",
"Magnify the most difficult details",
"Make it more sensual",
"Make what’s perfect more human",
"Move towards the unimportant",
"Not building a wall; making a brick",
"Once the search has begun, something will be found",
"Only a part, not the whole",
"Only one element of each kind",
"Openly resist change",
"Pae White’s non-blank graphic metacard",
"Question the heroic approach",
"Remember quiet evenings",
"Remove a restriction",
"Repetition is a form of change",
"Retrace your steps",
"Reverse",
"Simple Subtraction",
"Slow preparation, fast execution",
"State the problem as clearly as possible",
"Take a break",
"Take away the important parts",
"The inconsistency principle",
"The most easily forgotten thing is the most important",
"Think -inside the work -outside the work",
"Tidy up",
"Try faking it (From Stewart Brand.)",
"Turn it upside down",
"Use an old idea",
"Use cliches",
"Use filters",
"Use something nearby as a model",
"Use ‘unqualified’ people",
"Use your own ideas",
"Voice your suspicions",
"Water",
"What context would look right?",
"What is the simplest solution?",
"What mistakes did you make last time?",
"What to increase? What to reduce? What to maintain?",
"What were you really thinking about just now?",
"What wouldn’t you do?",
"What would your closest friend do?",
"When is it for?",
"Where is the edge?",
"Which parts can be grouped?",
"Work at a different speed",
"Would anyone want it?",
"Your mistake was a hidden intention",
"Use fewer notes",
"Use filters",
"Use ‘unqualified’ people",
"Water",
"What are you really thinking about just now? Incorporate",
"What is the reality of the situation?",
"What mistakes did you make last time?",
"What would your closest friend do?",
"What wouldn’t you do?",
"Work at a different speed",
"You are an engineer",
"You can only make one dot at a time",
"You don’t have to be ashamed of using your own ideas",
// The following is where the randomness magic happens.
];
var pickAStrategy = function () {
var randomStrategy = selectStrategy[Math.floor(Math.random() * selectStrategy.length)];
document.getElementById("randomStrategy").innerHTML = randomStrategy;
};
// This writes the strategy to the page.
document.getElementById("randomStrategy").innerHTML = "some placeholder"; <div class="container">
<div class="card fade-in">
<p id="randomStrategy"></p>
<INPUT TYPE=BUTTON VALUE="Click Me" onClick="pickAStrategy();" id="button"></INPUT>
</div> <!-- /card -->
</div> <!-- /container -->
答案 2 :(得分：1)
将用于更改文本的代码放入函数本身
var pickAStrategy = function pickAStrategy() {
var randomStrategy = selectStrategy[Math.floor(Math.random() * selectStrategy.length)];
document.getElementById("randomStrategy").innerHTML = randomStrategy; //< THIS
};
// Establish a variable, which pulls from an array.
var selectStrategy = [
"Abandon desire",
"Abandon normal instructions",
"Accept advice",
"Adding on",
"A line has two sides",
"Always the first steps",
"Ask people to work against their better judgement",
"Ask your body",
"Be dirty",
"Be extravagant",
"Be less critical",
"Breathe more deeply",
"Bridges -build -burn",
"Change ambiguities to specifics",
"Change nothing and continue consistently",
"Change specifics to ambiguities",
"Consider transitions",
"Courage!",
"Cut a vital connection",
"Decorate, decorate",
"Destroy nothing; destroy the most important thing",
"Discard an axiom",
"Disciplined self-indulgence",
"Discover your formulas and abandon them",
"Display your talent",
"Distort time",
"Do nothing for as long as possible",
"Don’t avoid what is easy",
"Don’t break the silence",
"Don’t stress one thing more than another",
"Do something boring",
"Do something sudden, destructive and unpredictable",
"Do the last thing first",
"Do the words need changing?",
"Emphasise differences",
"Emphasise the flaws",
"Faced with a choice, do both (From Dieter Rot.)",
"Find a safe part and use it as an anchor",
"Give the game away",
"Give way to your worst impulse",
"Go outside. Shut the door.",
"Go to an extreme, come part way back",
"How would someone else do it?",
"How would you have done it?",
"In total darkness, or in a very large room, very quietly",
"Is it finished?",
"Is something missing?",
"Is the style right?",
"It is simply a matter or work",
"Just carry on",
"Listen to the quiet voice",
"Look at the order in which you do things",
"Magnify the most difficult details",
"Make it more sensual",
"Make what’s perfect more human",
"Move towards the unimportant",
"Not building a wall; making a brick",
"Once the search has begun, something will be found",
"Only a part, not the whole",
"Only one element of each kind",
"Openly resist change",
"Pae White’s non-blank graphic metacard",
"Question the heroic approach",
"Remember quiet evenings",
"Remove a restriction",
"Repetition is a form of change",
"Retrace your steps",
"Reverse",
"Simple Subtraction",
"Slow preparation, fast execution",
"State the problem as clearly as possible",
"Take a break",
"Take away the important parts",
"The inconsistency principle",
"The most easily forgotten thing is the most important",
"Think -inside the work -outside the work",
"Tidy up",
"Try faking it (From Stewart Brand.)",
"Turn it upside down",
"Use an old idea",
"Use cliches",
"Use filters",
"Use something nearby as a model",
"Use ‘unqualified’ people",
"Use your own ideas",
"Voice your suspicions",
"Water",
"What context would look right?",
"What is the simplest solution?",
"What mistakes did you make last time?",
"What to increase? What to reduce? What to maintain?",
"What were you really thinking about just now?",
"What wouldn’t you do?",
"What would your closest friend do?",
"When is it for?",
"Where is the edge?",
"Which parts can be grouped?",
"Work at a different speed",
"Would anyone want it?",
"Your mistake was a hidden intention",
"Use fewer notes",
"Use filters",
"Use ‘unqualified’ people",
"Water",
"What are you really thinking about just now? Incorporate",
"What is the reality of the situation?",
"What mistakes did you make last time?",
"What would your closest friend do?",
"What wouldn’t you do?",
"Work at a different speed",
"You are an engineer",
"You can only make one dot at a time",
"You don’t have to be ashamed of using your own ideas",
// The following is where the randomness magic happens.
];
var pickAStrategy = function pickAStrategy() {
var randomStrategy = selectStrategy[Math.floor(Math.random() * selectStrategy.length)];
document.getElementById("randomStrategy").innerHTML = randomStrategy;
};
// This writes the strategy to the page.<div class="container">
<div class="card fade-in">
<p id="randomStrategy"></p>
<INPUT TYPE=BUTTON VALUE="Click Me" onClick="pickAStrategy();" id="button"></INPUT>
</div> <!-- /card -->
</div> <!-- /container -->