Question

我正在学习HTML和JavaScript。我做了一个足球联赛表格，并且愿意建立一个自动系统来更新该表格上的值。
这是表的代码：

<button onclick="Won()">Won</button>
<button onclick="Tied()">Tied</button>
<button onclick="Lost()">Lost</button>

我还有一些按钮可以自动设置值：

function Won()
{
    var n1 = parseFloat(document.getElementById("n1").value);
    var n2 = 1;

    document.getElementById("n1").value = n1 + n2;
}

我现在想做的是，如果我单击“ Won”按钮，则函数Won（）将获取与所播放的比赛相对应的值并加1，在这种情况下变为12。我在JavaScript中使用以下功能进行了尝试：

steps:
- ....
- name: 'gcr.io/cloud-builders/gsutil'
  args: ['-m', 'cp', '-r', 'web-app/build*', 'gs://my_bucket/$BUILD_ID']

有人可以帮助我吗？我可以提供详细信息或尝试更好地解释一切，因为英语不是我的母语，并且我可能会犯错误。

Answer 1

您的尝试非常接近！

虽然有一件事，在您提供的代码中的任何地方都看不到任何带有id="n1"的元素。也许它在您的实际代码库中，但是这里没有显示，所以我假设您的代码库中有一个。

下面是有效的代码，其中包含对您所做错误操作的解释和建议：

// Here I am wrapping your function with one main function
// So that you don't have to repeat your code for similar operations
function Won(){
  return AddScoreTo('wins')
}

function Tied(){
  return AddScoreTo('draws')
}

function Lost(){
  return AddScoreTo('loses')
}

function AddScoreTo(field){
    // I am breaking down the steps one by one
    // So that it can be easily understood
    // You can optimize them your way
    
    // Get the table by id
    var leagueTable = document.querySelector('#league');
    
    // Get the target cell from the table by className 
    var targetCell = leagueTable.querySelector('.' + field);
    
    // Get the content inside the target cell
    // .value is for input element only
    var value = parseInt(targetCell.textContent);

    // Change the content of the target cell
    targetCell.textContent = value + 1;
}

<!-- Added id to table -->
<table id="league" width="60%" border="0" style="text-align:center;">
    <!-- Added classes to easily identify them in JS or CSS -->
    <tr class="row" style="background:#01DF01;">
        <td class="position">1</td>  <!-- Position -->
        <td class="logo" align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td class="playedMatches">11</td> <!-- Played Matches -->
        <td class="wins">8</td>  <!-- Wins -->
        <td class="draws">1</td>  <!-- Draws -->
        <td class="loses">2</td>  <!-- Loses -->
        <td class="goalsInFavour">14</td> <!-- Goals in favour -->
        <td class="goalsAgainst">6</td>  <!-- Goals against -->
        <td class="goalsDifference">8</td>  <!-- Goals Difference -->
        <td class="points"><b>25</b></td>  <!-- Points -->
    </tr>
</table>

<button onclick="Won()">Won</button>
<button onclick="Tied()">Tied</button>
<button onclick="Lost()">Lost</button>

注意

当您有多行时，上面的代码将无法正常工作。在这种情况下，您应该在每行上使用id，并通过目标行而不是直接从表中找到相应的字段。

Answer 2

您必须在HTML中提供一个id字段。

例如<td>8</td> 将更改为<td I'd="n1">8</td>

Answer 3

似乎您需要使用innerText属性而不是value：

function Won() {
    var cell = document.getElementById('n1');
    var currentValue = parseInt(cell.innerText);
    cell.innerText = currentValue + 1;
}

还要确保您的HTML标记中有一个带有id="n1"的元素，因为现在似乎缺少了它：

<td id="n1">8</td>  <!-- Wins -->

Answer 4

## samples 1 item from inputData
boot.lm.vector <- function(index, inputData) {
                                              set.seed(index)
                                              return(sample(inputData, 1)) 
                                              }

## iterating 5 times: use lapply as per your requirement
test <- sapply(1:5, FUN = boot.lm.vector, inputData = 1:10) 
test
[1] 3 2 2 6 3                                 # reproducible result

import React,{ Component } from 'react';

export default class GoogleMap extends Component{
    componentDidMount(){
        new google.maps.Map(this.refs.map,{
            zoom:12,
            center:{
                lat:this.props.lat,
                lng:this.props.lon
            }
        });
    }

    render(){
        return <div ref="map" />
    }   
}

这是可行的。 import React,{ Component } from 'react'; import { connect } from 'react-redux'; import Chart from '../components/Chart'; import GoogleMap from '../components/GoogleMap'; class WeatherList extends Component{ citiesList(){ return this.props.weather.map(w=>{ //On va faire des conversions vers le celsius const temps=w.list.map(w=>w.main.temp-273.15); const pressure=w.list.map(w=>w.main.pressure); const humidity=w.list.map(w=>w.main.humidity); const { lon,lat }=w.city.coord return ( <tr> <td><GoogleMap name={ w.city.name } lon={ lon } lat={ lat } /></td> <td> <Chart moyenne={ "Temp moyenne : " } unite={" ᵒC"} color={"orange"} data={ temps } /> </td> <td> <Chart moyenne={ "Pression moyenne : " } unite={" hPa"} color={"green"} data={ pressure } /> </td> <td> <Chart moyenne={ "Humidité moyenne : " } unite={" %"} color={"black"} data={ humidity } /> </td> </tr> ) }) } render(){ return ( <table className='table table-hover'> <thead> <tr> <th>City</th> <th>Temperature</th> <th>Pressure</th> <th>Humidity</th> </tr> </thead> <tbody> { this.citiesList() } </tbody> </table> ) } } function mapStateToProps(state){ return { weather:state.weather } } export default connect(mapStateToProps)(WeatherList);仅适用于输入。对于常规元素，您需要function Won(){ var n1 = parseFloat(document.getElementById("won").textContent); document.getElementById("won").textContent = n1 + 1; } function Tied(){ var n1 = parseFloat(document.getElementById("draw").textContent); document.getElementById("draw").textContent = n1 + 1; } function Lost(){ var n1 = parseFloat(document.getElementById("loss").textContent); document.getElementById("loss").textContent = n1 + 1; }。 ps：您可能想更改该桌子上的css。绿色很奇怪

Answer 5

您只需要将ID传递给相应的每一列即可动态更新该值。

这是working example的链接

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <table width="60%" border="0" style="text-align:center;">
        <tr style="background:#01DF01;">
            <td>1</td>  <!-- Position -->
            <td align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
            <td id="n1">11</td> <!-- Played Matches -->
            <td>8</td>  <!-- Wins -->
            <td>1</td>  <!-- Draws -->
            <td>2</td>  <!-- Loses -->
            <td>14</td> <!-- Goals in favour -->
            <td>6</td>  <!-- Goals against -->
            <td>8</td>  <!-- Goals Difference -->
            <td><b>25</b></td>  <!-- Points -->
        </tr>
    </table>
    <button onclick="Won()">Won</button>
    <button onclick="Tied()">Tied</button>
    <button onclick="Lost()">Lost</button>
    </body>
    </html>
<script>
    function Won(){
          var n1= Number(document.getElementById("n1").innerText)
          n1 = n1 + 1;
          document.getElementById("n1").innerText =n1;
        }

HTML表单元格值计数器

5 个答案: