Question

我试图让用户输入以显示他们想要的“ +++”行数。我尝试了很多事情，但没有任何效果！！！我目前正在使用document.getElementById（'square'）。innerHTML = text; ，因为我的代码可以显示它，但是什么也没有发生，所以我的控制台也没有收到任何错误消息。请帮忙!!!

import pandas as pd
import requests
from bokeh.io import output_notebook, show
output_notebook()

from bokeh.models import ColumnDataSource, HoverTool
from bokeh.plotting import figure
from bokeh.transform import factor_cmap

url = "https://en.wikipedia.org/wiki/List_of_United_States_cities_by_crime_rate"
response = requests.get(url)

df = pd.read_html(response.content)[1]
df = df.iloc[2:]
df.columns = ['State', 'City', 'Population', 'Total_violent',
              'Murder', 'Rape', 'Robbery', 'Assault',
              'Total_property', 'Burglary', 'Larceny', 'Motor_theft',
              'Arson']

df.index = df.index - 2  # Reset index numbers
df.index = df.City


# rename index
df.index.name = 'index'

# Change data type and sort
df['Murder'] = df['Murder'].apply(pd.to_numeric, errors='coerce')
df = df.sort_values(by='Murder', ascending=True)

# first and last 10
df = pd.concat([df.head(10), df.tail(10)])
df.index = range(20)

# create low_high column
df['low_high'] = ['low']*10 + ['high']*10

# create group of two x-axes
group = df.groupby(by=['low_high', 'City'])

# from group get source
source = ColumnDataSource(group)

# from group get figure
p = figure(plot_width=800, plot_height=300, 
           title="Murder in US city per 100,000 people in 2009",
           x_range=group, 
           toolbar_location=None, 
           tools="")

# plot labels
p.xgrid.grid_line_color = None
p.xaxis.axis_label = "Cities"
p.yaxis.axis_label = "Murder"
p.xaxis.major_label_orientation = 1.2

# index_cmap will be used for fill_color
index_cmap = factor_cmap('low_high_City', 
                         palette=['#2b83ba', '#abdda4', '#ffffbf', '#fdae61', '#d7191c'], 
                         factors=df['low_high'].unique(), 
                         end=1)

p.vbar(x='low_high_City', 
       top='Murder_mean', 
       width=1, 
       source=source,
       line_color="white", 
       fill_color=index_cmap, 
       hover_line_color="darkgrey", 
       hover_fill_color=index_cmap)


hover_cols = ['Murder','Rape','Robbery','Assault','Burglary','Larceny','Motor_theft','Arson']
for col in hover_cols:
    df[col] = df[col].apply(pd.to_numeric, errors='coerce')


tooltips = [(c,"@"+c+"_mean") for c in hover_cols]
tooltips = [("City","@City")] + tooltips
p.add_tools(HoverTool(tooltips=tooltips))

show(p)

function loop4(){
    var rows = +prompt ('Please enter the ammount of rows you would like')
    var num = 0
    var text = ''
        while (num !==rows){
            text+= '+++ \n';
            num +=1;
        }
     document.getElementById('square').innerHTML = text;

Answer 1

我修复了它，并增加了一点：）

该函数末尾缺少括号。此外，输入元素不会采用.innerHTML。如果您希望将.value放在按钮上，则可以设置.innerHTML。

function loop4() {
  var rows = +prompt('Please enter the ammount of rows you would like')
  var num = 0
  var text = ''
  while (num !== rows) {
    text += '+'.repeat(rows) +' <br>';
    num += 1;
  }
  document.getElementById('square').innerHTML = text;
}

<input class='button' id='square-btn' type='button' onclick="loop4()" value='Draw Square' /> <br>
<pre id="square">

</pre>

Answer 2

尝试将文本放在像pre这样的元素中

function loop4(){
    var rows = +prompt ('Please enter the ammount of rows you would like')
    var num = 0
    var text = ''
        while (num !==rows){
            text+= '+++ \n';
            num +=1;
        }
     document.getElementById('square').innerText = text;
}

<input class='button' type='button' onclick="loop4()" value='Draw Square' /> <br>

<pre id="square"></pre>

Answer 3

也许您可以采用以下方法，即每行添加唯一的DOM元素。对于每一行，您都需要用'+++'字符填充innerHTML字段。

请考虑以下内容：

function loop4(){
    var rows = +prompt ('Please enter the ammount of rows you would like')
    var num = 0;

    while (num !==rows){
        num +=1;

        // Create this row's div element
        var row = document.createElement('div');

        // Populate row with + characters
        row.innerHTML = '+++';

        // Add the row to a display area div, which is a new div intended
        // for displaying the desired result
        document.getElementById('square').append( row );
    }

} // Also, be sure to add this to avoid syntax errors

<!-- Remove id=square from button -->
<input class='button' type='button' onclick="loop4()" value='Draw Square' /> <br>

<!-- Add this div to display square -->
<div id="square"></div>

如何在HTML页面上显示JS循环的输出

3 个答案: