Question

我试图按下按钮来调用该功能。功能本身工作正常（我可以记录），但我无法在按钮单击时在浏览器中显示它。我第一次参与进来，对于经验丰富的JS程序员来说问题应该是非常明显的。

谢谢！

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
 <title>X</title>
</head>
<body>
    <div id="pickButton">
        <input class="button" type="button" value="CLICK HERE TO PICK NOW!" onclick="giveNumbers()">
    </div>

    <div class="mainNumberSpanAndTitle">
        <label>MAIN NUMBERS: </label>
            <span id="mainNumberSpan"></span>
    </div>
<script>

 function giveNumbers() {

   var digits = []
   for (var i = 0; i < 6; i++) {
       var digit = getRandomNumber1to50()  
       digits.push(digit)
   }
   digits.push(getRanomNumber1to7())
   digits.push(getRanomNumber1to7())
   return digits


 }

function getRandomNumber1to50() {
  var num;
  num = Math.random()*50+1;
  num = Math.floor(num);  
  return num
}

function getRanomNumber1to7() {
  var num;
  num = Math.random()*7+1;
  num = Math.floor(num);  
  return num
}
    var mainNumberSpan = document.getElementById('mainNumberSpan');

    mainNumberSpan.innerHTML = digits;
}
</script>
</body>
</html>

Answer 1

使用document.write(digit)进行显示但是你可以使用innerHtml在任何标签中显示其比bat.write（）

更重要的标签

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
 <title>X</title>
</head>
<body>
    <div id="pickButton">
        <input class="button" type="button" value="CLICK HERE TO PICK NOW!" onclick="giveNumbers()">
    </div>

    <div class="mainNumberSpanAndTitle">
        <label>MAIN NUMBERS: </label>
            <span id="mainNumberSpan"></span>
    </div>
<script>

 function giveNumbers() {{

   var digits = []
   for (var i = 0; i < 6; i++) {
       var digit = getRandomNumber1to50()  
       digits.push(digit)
   }
   digits.push(getRanomNumber1to7())
   digits.push(getRanomNumber1to7())
   document.write(digits);


 }

function getRandomNumber1to50() {
  var num;
  num = Math.random()*50+1;
  num = Math.floor(num);  
  return num
}

function getRanomNumber1to7() {
  var num;
  num = Math.random()*7+1;
  num = Math.floor(num);  
  return num
}
    var mainNumberSpan = document.getElementById('mainNumberSpan');

    mainNumberSpan.innerHTML = digits;
}
</script>
</body>
</html>

Answer 2

function giveNumbers() {

  var digits = []
  for (var i = 0; i < 6; i++) {
    var digit = getRandomNumber1to50()
    digits.push(digit)
  }
  digits.push(getRanomNumber1to7())
  digits.push(getRanomNumber1to7())

  document.getElementById('mainNumberSpan');

  mainNumberSpan.innerHTML = digits;


}

function getRandomNumber1to50() {
  var num;
  num = Math.random() * 50 + 1;
  num = Math.floor(num);
  return num
}

function getRanomNumber1to7() {
  var num;
  num = Math.random() * 7 + 1;
  num = Math.floor(num);
  return num
}

<div id="pickButton">
  <input class="button" type="button" value="CLICK HERE TO PICK NOW!" onClick="giveNumbers()">
</div>

<div class="mainNumberSpanAndTitle">
  <label>MAIN NUMBERS: </label>
  <span id="mainNumberSpan"></span>
</div>

Answer 3

看看这个在线示例。

如果你为JS引入了一些内容{.namespace。 } 你需要打电话来执行。

＆＃13;

 

 function giveNumbers() {
   var digits = []
   for (var i = 0; i < 6; i++) {
       var digit = getRandomNumber1to50()  
       digits.push(digit)
   }
   digits.push(getRanomNumber1to7())
   digits.push(getRanomNumber1to7())
    alert("trigger")
    var mainNumberSpan = document.getElementById('mainNumberSpan');

    mainNumberSpan.innerHTML = digits;
    
   return digits
 }

function getRandomNumber1to50() {
  var num;
  num = Math.random()*50+1;
  num = Math.floor(num);  
  return num
}

function getRanomNumber1to7() {
  var num;
  num = Math.random()*7+1;
  num = Math.floor(num);  
  return num
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
 <title>X</title>
</head>
<body>
    <div id="pickButton">
        <input class="button" type="button" value="CLICK HERE TO PICK NOW!" onclick="giveNumbers()">
    </div>

    <div class="mainNumberSpanAndTitle">
        <label>MAIN NUMBERS: </label>
            <span id="mainNumberSpan"></span>
    </div>

＆＃13;

Answer 4

此处代码中存在一些错误。

2 {{ }}应该是{}

中的单giveNumbers()

希望这会对你有所帮助

＆＃13;

function giveNumbers() {
   var digits = []
   for (var i = 0; i < 6; i++) {
       var digit = getRandomNumber1to50()  
       digits.push(digit)
   }
   digits.push(getRanomNumber1to7())
   digits.push(getRanomNumber1to7())
   var mainNumberSpan = document.getElementById('mainNumberSpan');
   mainNumberSpan.innerHTML = digits;
 }

function getRandomNumber1to50() {
  var num;
  num = Math.random()*50+1;
  num = Math.floor(num);  
  return num
}

function getRanomNumber1to7() {
  var num;
  num = Math.random()*7+1;
  num = Math.floor(num);  
  return num
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
 <title>X</title>
</head>
<body>
    <div id="pickButton">
        <input class="button" type="button" value="CLICK HERE TO PICK NOW!" onclick="giveNumbers()">
    </div>

    <div class="mainNumberSpanAndTitle">
        <label>MAIN NUMBERS: </label>
            <span id="mainNumberSpan"></span>
    </div>
</body>
</html>

＆＃13;

Answer 5

检查此代码： -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>X</title>
</head>
<body>
    <div id="pickButton">
        <input class="button" type="button" value="CLICK HERE TO PICK NOW!" onclick="giveNumbers()">
    </div>

    <div class="mainNumberSpanAndTitle">
        <label>MAIN NUMBERS: </label>
            <span id="mainNumberSpan"></span>
    </div>
<script>

 function giveNumbers() {

   var digits = []
   for (var i = 0; i < 6; i++) {
       var digit = getRandomNumber1to50()  
       digits.push(digit)
   }
   digits.push(getRanomNumber1to7())
   digits.push(getRanomNumber1to7())
   //return digits; // Remove it 

function getRandomNumber1to50() {
  var num;
  num = Math.random()*50+1;
  num = Math.floor(num);  
  return num
}

function getRanomNumber1to7() {
  var num;
  num = Math.random()*7+1;
  num = Math.floor(num);  
  return num
}
    var mainNumberSpan = document.getElementById('mainNumberSpan');

    mainNumberSpan.innerHTML = digits;
    console.log(mainNumberSpan);
}
</script>
</body>
</html>

Answer 6

尝试这一个您在innerHTML函数之外使用giveNumbers，因此您更改span函数中giveNumbers的设置值，并且此函数不需要return

function giveNumbers() {

  var digits = [];
  for (var i = 0; i < 6; i++) {
    var digit = getRandomNumber1to50();
    digits.push(digit);
  }
  digits.push(getRanomNumber1to7());
  digits.push(getRanomNumber1to7());

  var mainNumberSpan = document.getElementById('mainNumberSpan');
  mainNumberSpan.innerHTML = digits;
}

function getRandomNumber1to50() {
  var num;
  num = Math.random() * 50 + 1;
  num = Math.floor(num);

  return num
}

function getRanomNumber1to7() {
  var num;
  num = Math.random() * 7 + 1;
  num = Math.floor(num);

  return num
}

<div id="pickButton">
  <input class="button" type="button" value="CLICK HERE TO PICK NOW!" onclick="giveNumbers()">
</div>

<div class="mainNumberSpanAndTitle">
  <label>MAIN NUMBERS: </label>
  <span id="mainNumberSpan"></span>
</div>

Answer 7

将功能更改为：

function giveNumbers() {{
   var digits = []
   for (var i = 0; i < 6; i++) {
       var digit = getRandomNumber1to50()  
       digits.push(digit)
   }
   digits.push(getRanomNumber1to7())
   digits.push(getRanomNumber1to7())
   var mainNumberSpan = document.getElementById('mainNumberSpan'); // added these
   mainNumberSpan.innerHTML = digits; 
 }

JavaScript - Onclick功能

7 个答案: