Question

我只是想让我的循环计数器将其所有索引输出到我的html

这是我的html输入：

function myFunction() {
  var start = document.getElementByName("start")[0].value;
  var end = document.getElementByName("end")[0].value;
  var step = document.getElementByName("step")[0].value;

  for (var i = start; i < end; i += step) {
    document.getElementById("myP").value = i;

  }
}

这是我的javaScript：

import React, { Component } from 'react';
import { render } from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

class Home extends Component {
    render(){
        return (<h1>Hi123</h1>);
    }
}

render(
    <Router history={history}>
        <Route path="/" component={Home}/>
    </Router>,
    document.getElementById('container')
);

如果开始（4），结束（20）和步骤（3）以及我在chrome devTool中的console.log输出是4,10,16所以我很确定该功能有效但几天我已经能够弄清楚如何将我想要的结果发送到我的HTML。

Answer 1

该段没有值属性。您需要设置textContext。

 function myFunction(){
         var start = document.getElementByName("start")[0].value;
         var end = document.getElementByName("end")[0].value;
         var step = document.getElementByName("step")[0].value;

         for(var i = start; i < end; i += step){
          document.getElementById("myP").textContext= i;

          }
        }

Answer 2

有几个问题：

您需要使用parseInt函数
没有document.getElementByName，而是document.getElementsByName
我添加了一个数组来收集i的每个值，然后将所有收集的值的串联设置为innerHTML的{{1}}属性

myP

function myFunction(){
    var start = parseInt(document.getElementsByName("start")[0].value);
    var end = parseInt(document.getElementsByName("end")[0].value);
    var step = parseInt(document.getElementsByName("step")[0].value);

    var is = [];
    for(var i = start; i < end; i += step){
        is.push(i);
    }
    document.getElementById("myP").innerHTML = is.join();
}

myFunction();

Answer 3

使用innerHTML。

.some-stray-container {
  margin: 5vh 5vw;
  background: gray;
  height: 90vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
}

.content {
  padding: .5em;
}

.layout-vertical {
  align-self: stretch;
  background: #F1F1F1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.layout-vertical-section {
  background: linear-gradient(transparent, #DDDDDD);
}

.layout-vertical-section.grow {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.layout-horizontal {
  align-self: stretch;
  background: #CCCCCC;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.layout-horizontal-section {
  background: linear-gradient(90deg, transparent, #AAAAAA);
  display: flex;
  flex-direction: column;
}

.layout-horizontal-section.grow {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.layout-horizontal-section.panel {
  width: 300px;
}

.content-scroll {
  align-self: stretch;
  flex-grow: 1;
  overflow: auto;
  padding: .5em;
}

无法得到循环循环的计数输出它的整个索引到html元素

3 个答案: