Question

这是我目前使用的代码

function firstChildAge() { 
    var header = document.createElement('H3');
    var body = document.getElementsByTagName('BODY');
    var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
    var inputChildOne = document.createElement("Input");
    var childOneAgeResponse = inputChildOne.value;
    header.appendChild(textnode);
    document.body.appendChild(header);
    document.body.appendChild(inputChildOne);
}

function submitButton() {
    var btn = document.createElement('Button');
    document.body.appendChild(btn);
    btn.onClick = testFunction_2();
}

function testFunction_2() {
    alert("foo");
}

if (childrenResponse == 1) {
    firstChildAge();
    submitButton(); 
}

如您所见，如果childrenResponse（用户对先前查询的响应）等于1，则两个函数都被激活。尝试的目标是创建文本节点，输入和按钮。现在的按钮应该激活testFunction2（），它提醒我们它正在工作。但是，testFunction2（）在文本节点或输入甚至显示之前激活。我可以找到原因，如果有人能帮助我，我会非常感激。谢谢。

另外，在旁注中，如何在submitButton（）中创建的按钮中添加文本？谢谢！

Answer 1

您已拨打testFunction_2，而不是分配它。这应该没问题。

function submitButton() {
    var btn = document.createElement('Button');
    btn.onclick = testFunction_2;
    document.body.appendChild(btn);
}

Answer 2

您正在调用testFunction_2()中的onClick功能。您需要向按钮添加事件监听器，如下所示

btn.addEventListener('click', testFunction_2);

要向按钮添加文字

var txt = document.createTextNode("CLICK ME");
btn.appendChild(txt);

检查下面的代码段

function firstChildAge() {
  var header = document.createElement('H3');
  var body = document.getElementsByTagName('BODY');
  var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
  var inputChildOne = document.createElement("Input");
  var childOneAgeResponse = inputChildOne.value;
  header.appendChild(textnode);
  document.body.appendChild(header);
  document.body.appendChild(inputChildOne);
}

function submitButton() {
  var btn = document.createElement('Button');
  var txt = document.createTextNode("CLICK ME");
  btn.appendChild(txt);
  document.body.appendChild(btn);
  btn.addEventListener('click', testFunction_2);
}

function testFunction_2() {
  alert("foo");
}

childrenResponse = 1;
if (childrenResponse == 1) {
  firstChildAge();
  submitButton();
}

Answer 3

有两个问题：

import AppScreen from './src/test/AppScreen' export default class myapp extends Component { render() { return (<AppScreen/>); } } //the rest code...应该onClick。
您正在执行该功能并将该功能的结果分配给onclick。 onclick应为btn.onClick = testFunction_2();

请参阅下面的工作代码段。

＆＃13;

btn.onClick = testFunction_2;

＆＃13;

在javascript中，您可以使用innerHTML设置按钮的HTML内容。

请参阅Setting button text via javascript

function firstChildAge() { 
    var header = document.createElement('H3');
    var body = document.getElementsByTagName('BODY');
    var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
    var inputChildOne = document.createElement("Input");
    var childOneAgeResponse = inputChildOne.value;
    header.appendChild(textnode);
    document.body.appendChild(header);
    document.body.appendChild(inputChildOne);
}
function testFunction_2() {
    alert("foo");
}

function submitButton() {
    var btn = document.createElement('button');
    btn.innerHTML = "Some button name";
    btn.onclick = testFunction_2;
     document.body.appendChild(btn);
}

var childrenResponse = 1;

if (childrenResponse == 1) {
    firstChildAge();
    submitButton(); 
}

Mozilla开发者网络是一个很好的资源。这是上述代码段的两个链接。

MDN innerHTML

MDN HTML Button element

Answer 4

您正在onClick中调用函数testFunction_2。您需要提供参考。这也行不通。您需要向按钮添加事件侦听器。要设置文本，只需设置按钮的innerHTML。

var btn = document.createElement('Button');
btn.innerHTML = "click";
btn.addEventListener('click', testFunction_2);
document.body.appendChild(btn);

btn.onclick = testFunction_2; // in place of addEventListener.

//如果你想使用onclick。在onclick中使用小案例'c'。

为什么这个javascript函数会在错误的时间激活？

4 个答案: