我有一个包含用户名，密码和验证码输入的表单。用户输入他们的用户名和密码并单击登录，这将取消隐藏允许他们输入其验证别针的div。在隐藏的div中显示'你好这个帐户正在使用验证引脚'但是我想知道是否有一种方法我可以说'你好//输入的用户名//这个帐号使用了验证销'。我怎么做到这一点？
取消隐藏div的按钮
var query = // get receipt items under certain category
var outerPromise = query.once('value').then(data => {
var promises = [];
var datasetarr = [];
data.forEach(snapshot => {
var itemData = // get receipt item unique push ID
var query = // get details of receipt items
var promise = query.once('value').then(data => {
var itemDetail = // get receipt item detail
if(type == subtype){
var receiptID = itemDetail.receiptID;
var query = // query receipts table by receiptID
return query.once('value').then(data => {
data.forEach(snapshot => {
snapshot.forEach(childSnapshot => {
if(childSnapshot.key == receiptID){
var accountKey = // get accountID
var query = // query accounts table
return query.once('value').then(data => {
var accountDetail = data.val();
var age = accountDetail.age;
var gender = accountDetail.gender;
console.log(age + ' ' + gender);
datasetarr.push({age: age, gender: gender});
});
}
});
});
});
}
});
promises.push(promise);
});
return Promise.all(promises).then(()=> datasetarr);
});
用户输入用户名的字段。
console.log隐藏div中显示的消息
outerPromise.then((arr) => {
console.log('promise done');
for(var i = 0; i < arr.length; i++){
console.log(arr[i].age + ' ' + arr[i].gender);
}
});
任何帮助将不胜感激
答案 0 :(得分：1)
这应该这样做：
public class CandleStickChart extends XYChart<String, Number> {
String chartPattern = "yyyy/MM/dd";
SimpleDateFormat sdf = new SimpleDateFormat(chartPattern);
protected static final Logger logger =
Logger.getLogger(CandleStickChart.class.getName());
protected int maxBarsToDisplay;
protected ObservableList<XYChart.Series<String, Number>> dataSeries;
protected BarData lastBar;
protected NumberAxis yAxis;
protected CategoryAxis xAxis;
protected String ticker;
public CandleStickChart(String title, List<BarData> bars,String chartPatternIn) {
this(title, bars, Integer.MAX_VALUE);
chartPattern=chartPatternIn;
ticker=title;
}
/**
*
* @param title The chart title
* @param bars The bars to display in the chart
* @param maxBarsToDisplay The maximum number of bars to display in the chart.
*/
public CandleStickChart(String title, List<BarData> bars, int maxBarsToDisplay) {
this(title.toUpperCase(), new CategoryAxis(), new NumberAxis(), bars, maxBarsToDisplay);
}
/**
* Construct a new CandleStickChart with the given axis.
*
* @param title The chart title
* @param xAxis The x axis to use
* @param yAxis The y axis to use
* @param bars The bars to display on the chart
* @param maxBarsToDisplay The maximum number of bars to display on the chart.
*/
public CandleStickChart(String title, CategoryAxis xAxis, NumberAxis yAxis, List<BarData> bars, int maxBarsToDisplay) {
super(xAxis, yAxis);
this.xAxis = xAxis;
this.yAxis = yAxis;
this.maxBarsToDisplay = maxBarsToDisplay;
yAxis.autoRangingProperty().set(true);
yAxis.forceZeroInRangeProperty().setValue(Boolean.FALSE);
setTitle(title);
setAnimated(true);
//getStylesheets().add(getClass().getResource("/styles/CandleStickChartStyles.css").toExternalForm());
xAxis.setAnimated(true);
yAxis.setAnimated(true);
verticalGridLinesVisibleProperty().set(false);
XYChart.Series<String, Number> series = new XYChart.Series<>();
List<BarData> sublist = getSubList(bars, maxBarsToDisplay);
for (BarData bar : sublist) {
String label = "";
label = sdf.format(bar.getDateTime().getTime());
series.getData().add(new XYChart.Data<>(label, bar.getOpen(), bar));
logger.log(Level.INFO, "Adding bar with date/time: {0}", bar.getDateTime().getTime());
logger.log(Level.INFO, "Adding bar with price: {0}", bar.getOpen());
}
dataSeries = FXCollections.observableArrayList(series);
setData(dataSeries);
lastBar = sublist.get(sublist.size() - 1);
}
/**
* Defines a formatter to use when formatting the y-axis values.
* @param formatter The formatter to use when formatting the y-axis values.
*/
public void setYAxisFormatter(DecimalAxisFormatter formatter) {
yAxis.setTickLabelFormatter(formatter);
}
/**
* Appends a new bar on to the end of the chart.
* @param bar The bar to append to the chart
*/
public void addBar(BarData bar) {
if (dataSeries.get(0).getData().size() >= maxBarsToDisplay) {
dataSeries.get(0).getData().remove(0);
}
int datalength = dataSeries.get(0).getData().size();
dataSeries.get(0).getData().get(datalength - 1).setYValue(bar.getOpen());
dataSeries.get(0).getData().get(datalength - 1).setExtraValue(bar);
String label = sdf.format(bar.getDateTime().getTime());
logger.log(Level.INFO, "Adding bar with actual time: {0}", bar.getDateTime().getTime());
logger.log(Level.INFO, "Adding bar with formated time: {0}", label);
lastBar = new BarData(bar.getDateTime(), bar.getClose(), bar.getClose(), bar.getClose(), bar.getClose(), 0);
Data<String, Number> data = new XYChart.Data<>(label, lastBar.getOpen(), lastBar);
dataSeries.get(0).getData().add(data);
}
/**
* Update the "Last" price of the most recent bar
* @param price The Last price of the most recent bar.
*/
public void updateLast(double price) {
if (lastBar != null) {
lastBar.update(price);
logger.log(Level.INFO, "Updating last bar with date/time: {0}", lastBar.getDateTime().getTime());
int datalength = dataSeries.get(0).getData().size();
dataSeries.get(0).getData().get(datalength - 1).setYValue(lastBar.getOpen());
dataSeries.get(0).getData().get(datalength - 1).setExtraValue(lastBar);
logger.log(Level.INFO, "Updating last bar with formatteddate/time: {0}", dataSeries.get(0).getData().get(datalength - 1).getXValue());
}
}
protected List<BarData> getSubList(List<BarData> bars, int maxBars) {
List<BarData> sublist;
if (bars.size() > maxBars) {
return bars.subList(bars.size() - 1 - maxBars, bars.size() - 1);
} else {
return bars;
}
}
// -------------- METHODS ------------------------------------------------------------------------------------------
/**
* Called to update and layout the content for the plot
*/
@Override
protected void layoutPlotChildren() {
// we have nothing to layout if no data is present
if (getData() == null) {
return;
}
// update candle positions
for (int seriesIndex = 0; seriesIndex < getData().size(); seriesIndex++) {
Series<String, Number> series = getData().get(seriesIndex);
Iterator<Data<String, Number>> iter = getDisplayedDataIterator(series);
Path seriesPath = null;
if (series.getNode() instanceof Path) {
seriesPath = (Path) series.getNode();
seriesPath.getElements().clear();
}
while (iter.hasNext()) {
Data<String, Number> item = iter.next();
double x = getXAxis().getDisplayPosition(getCurrentDisplayedXValue(item));
double y = getYAxis().getDisplayPosition(getCurrentDisplayedYValue(item));
Node itemNode = item.getNode();
BarData bar = (BarData) item.getExtraValue();
if (itemNode instanceof Candle && item.getYValue() != null) {
Candle candle = (Candle) itemNode;
double close = getYAxis().getDisplayPosition(bar.getClose());
double high = getYAxis().getDisplayPosition(bar.getHigh());
double low = getYAxis().getDisplayPosition(bar.getLow());
double candleWidth = 10;
// update candle
candle.update(close - y, high - y, low - y, candleWidth);
// update tooltip content
candle.updateTooltip(bar.getOpen(), bar.getClose(), bar.getHigh(), bar.getLow());
// position the candle
candle.setLayoutX(x);
candle.setLayoutY(y);
}
}
}
}
@Override
protected void dataItemChanged(Data<String, Number> item) {
}
@Override
protected void dataItemAdded(Series<String, Number> series, int itemIndex, Data<String, Number> item) {
Node candle = createCandle(getData().indexOf(series), item, itemIndex);
if (shouldAnimate()) {
candle.setOpacity(0);
getPlotChildren().add(candle);
// fade in new candle
FadeTransition ft = new FadeTransition(Duration.millis(500), candle);
ft.setToValue(1);
ft.play();
} else {
getPlotChildren().add(candle);
}
// always draw average line on top
if (series.getNode() != null) {
series.getNode().toFront();
}
}
@Override
protected void dataItemRemoved(Data<String, Number> item, Series<String, Number> series) {
final Node candle = item.getNode();
if (shouldAnimate()) {
// fade out old candle
FadeTransition ft = new FadeTransition(Duration.millis(500), candle);
ft.setToValue(0);
ft.setOnFinished((ActionEvent actionEvent) -> {
getPlotChildren().remove(candle);
});
ft.play();
} else {
getPlotChildren().remove(candle);
}
}
@Override
protected void seriesAdded(Series<String, Number> series, int seriesIndex) {
// handle any data already in series
for (int j = 0; j < series.getData().size(); j++) {
Data item = series.getData().get(j);
Node candle = createCandle(seriesIndex, item, j);
if (shouldAnimate()) {
candle.setOpacity(0);
getPlotChildren().add(candle);
// fade in new candle
FadeTransition ft = new FadeTransition(Duration.millis(500), candle);
ft.setToValue(1);
ft.play();
} else {
getPlotChildren().add(candle);
}
}
// create series path
Path seriesPath = new Path();
seriesPath.getStyleClass().setAll("candlestick-average-line", "series" + seriesIndex);
series.setNode(seriesPath);
getPlotChildren().add(seriesPath);
}
@Override
protected void seriesRemoved(Series<String, Number> series) {
// remove all candle nodes
for (XYChart.Data<String, Number> d : series.getData()) {
final Node candle = d.getNode();
if (shouldAnimate()) {
// fade out old candle
FadeTransition ft = new FadeTransition(Duration.millis(500), candle);
ft.setToValue(0);
ft.setOnFinished((ActionEvent actionEvent) -> {
getPlotChildren().remove(candle);
});
ft.play();
} else {
getPlotChildren().remove(candle);
}
}
}
/**
* Create a new Candle node to represent a single data item
*
* @param seriesIndex The index of the series the data item is in
* @param item The data item to create node for
* @param itemIndex The index of the data item in the series
* @return New candle node to represent the give data item
*/
private Node createCandle(int seriesIndex, final Data item, int itemIndex) {
Node candle = item.getNode();
// check if candle has already been created
if (candle instanceof Candle) {
((Candle) candle).setSeriesAndDataStyleClasses("series" + seriesIndex, "data" + itemIndex);
} else {
candle = new Candle("series" + seriesIndex, "data" + itemIndex);
item.setNode(candle);
}
return candle;
}
/**
* This is called when the range has been invalidated and we need to update
* it. If the axis are auto ranging then we compile a list of all data that
* the given axis has to plot and call invalidateRange() on the axis passing
* it that data.
*/
@Override
protected void updateAxisRange() {
// For candle stick chart we need to override this method as we need to let the axis know that they need to be able
// to cover the whole area occupied by the high to low range not just its center data value
final Axis<String> xa = getXAxis();
final Axis<Number> ya = getYAxis();
List<String> xData = null;
List<Number> yData = null;
if (xa.isAutoRanging()) {
xData = new ArrayList<>();
}
if (ya.isAutoRanging()) {
yData = new ArrayList<>();
}
if (xData != null || yData != null) {
for (Series<String, Number> series : getData()) {
for (Data<String, Number> data : series.getData()) {
if (xData != null) {
xData.add(data.getXValue());
}
if (yData != null) {
BarData extras = (BarData) data.getExtraValue();
if (extras != null) {
yData.add(extras.getHigh());
yData.add(extras.getLow());
} else {
yData.add(data.getYValue());
}
}
}
}
if (xData != null) {
xa.invalidateRange(xData);
}
if (yData != null) {
ya.invalidateRange(yData);
}
}
}
/**
* Candle node used for drawing a candle
*/
private class Candle extends Group {
private final Line highLowLine = new Line();
private final Region bar = new Region();
private String seriesStyleClass;
private String dataStyleClass;
private boolean openAboveClose = true;
private final Tooltip tooltip = new Tooltip();
private Candle(String seriesStyleClass, String dataStyleClass) {
setAutoSizeChildren(false);
getChildren().addAll(highLowLine, bar);
this.seriesStyleClass = seriesStyleClass;
this.dataStyleClass = dataStyleClass;
updateStyleClasses();
tooltip.setGraphic(new TooltipContent());
Tooltip.install(bar, tooltip);
}
public void setSeriesAndDataStyleClasses(String seriesStyleClass, String dataStyleClass) {
this.seriesStyleClass = seriesStyleClass;
this.dataStyleClass = dataStyleClass;
updateStyleClasses();
}
public void update(double closeOffset, double highOffset, double lowOffset, double candleWidth) {
openAboveClose = closeOffset > 0;
updateStyleClasses();
highLowLine.setStartY(highOffset);
highLowLine.setEndY(lowOffset);
if (candleWidth == -1) {
candleWidth = bar.prefWidth(-1);
}
if (openAboveClose) {
bar.resizeRelocate(-candleWidth / 2, 0, candleWidth, closeOffset);
} else {
bar.resizeRelocate(-candleWidth / 2, closeOffset, candleWidth, closeOffset * -1);
}
}
public void updateTooltip(double open, double close, double high, double low) {
TooltipContent tooltipContent = (TooltipContent) tooltip.getGraphic();
tooltipContent.update(open, close, high, low);
}
private void updateStyleClasses() {
getStyleClass().setAll("candlestick-candle", seriesStyleClass, dataStyleClass);
highLowLine.getStyleClass().setAll("candlestick-line", seriesStyleClass, dataStyleClass,
openAboveClose ? "open-above-close" : "close-above-open");
bar.getStyleClass().setAll("candlestick-bar", seriesStyleClass, dataStyleClass,
openAboveClose ? "open-above-close" : "close-above-open");
}
}
private class TooltipContent extends GridPane {
private final Label openValue = new Label();
private final Label closeValue = new Label();
private final Label highValue = new Label();
private final Label lowValue = new Label();
private TooltipContent() {
Label open = new Label("OPEN:");
Label close = new Label("CLOSE:");
Label high = new Label("HIGH:");
Label low = new Label("LOW:");
open.getStyleClass().add("candlestick-tooltip-label");
close.getStyleClass().add("candlestick-tooltip-label");
high.getStyleClass().add("candlestick-tooltip-label");
low.getStyleClass().add("candlestick-tooltip-label");
setConstraints(open, 0, 0);
setConstraints(openValue, 1, 0);
setConstraints(close, 0, 1);
setConstraints(closeValue, 1, 1);
setConstraints(high, 0, 2);
setConstraints(highValue, 1, 2);
setConstraints(low, 0, 3);
setConstraints(lowValue, 1, 3);
getChildren().addAll(open, openValue, close, closeValue, high, highValue, low, lowValue);
}
public void update(double open, double close, double high, double low) {
openValue.setText(Double.toString(open));
closeValue.setText(Double.toString(close));
highValue.setText(Double.toString(high));
lowValue.setText(Double.toString(low));
}
}
public void clear( List<BarData> bars, String ChartPatterIn){
String chartPattern = ChartPatterIn;
SimpleDateFormat sdf = new SimpleDateFormat(chartPattern);
ObservableList<populateSweep> sweeps = populateSweep.tickList(ticker);
XYChart.Series<String, Number> series = new XYChart.Series<>();
XYChart.Series<String, Number> ca = new XYChart.Series<>();
List<BarData> sublist = getSubList(bars, maxBarsToDisplay);
for (BarData bar : sublist) {
String label = "";
label = sdf.format(bar.getDateTime().getTime());
series.getData().add(new XYChart.Data<>(label, bar.getOpen(), bar));
for(int q =0;q<sweeps.size();q++) {
if (label.equals(sweeps.get(q).getTime())) {
Data<String, Number> call = new Data<String, Number>(label, bar.getOpen(), bar);
call.setNode(new Circle(50, Color.GREEN));
ca.getData().add(call);
}
}
logger.log(Level.INFO, "Adding bar with date/time: {0}", bar.getDateTime().getTime());
logger.log(Level.INFO, "Adding bar with price: {0}", bar.getOpen());
}
ObservableList<XYChart.Series<String, Number>> answer = FXCollections.observableArrayList();
answer.addAll(series,ca);
//dataSeries = FXCollections.observableArrayList(series);
setData(answer);
chart.setAnimated(false);
xAxis.setAutoRanging(true);
xAxis.setTickLabelsVisible(false);
xAxis.setTickMarkVisible(false);
updateAxisRange();
}
protected static CandleStickChart chart;
}
答案 1 :(得分：1)
当然有可能。您可以使用DOM。在您的showDiv() function中，您可以使用dom获取输入的用户名。你可以这样做：
function showDiv() {
const username = document.getElementById("userLogin");
const div = getElementById("login_twofactorauth_message_entercode_accountname")
div.getElementsByTagName("p").innerText = "Hy " + username + ", welcome...";
}
这段代码可以解决问题！
希望这有帮助！
答案 2 :(得分：1)
这基本上意味着您添加到div中的所有内容都是使用jQuery完成的，而不是混合使用，这可能会导致以后混淆。
id="username"添加到您的输入中。id="modaldiv"添加到您的hello div 删除该div中的所有内容。
var username = $("#username").val();
var divhtml = "Hello " + username + " <span
id='login_twofactorauth_message_entercode_accountname'></span>!
$("#modaldiv").html(divhtml);
答案 3 :(得分：1)
以下代码一定会让您入门。它允许您使用.value获取用户在输入框中输入的值，并使用.innerHTML将内容添加到另一个div。
var displayUsername = function() {
var username = document.getElementById('username').value
if(username != '') {
document.getElementById('message').innerHTML = 'Hello '+username+'!'
}
}<input type="text" name="username" id="username">
<button class="clickMe" onclick="displayUsername()">Click ME!</button>
<div id="message"></div>
答案 4 :(得分：0)
我在你的html中添加了一个id =“反馈”：
<div id="feedback" class="auth_modal_h1" style="display:none;">
Hello <span id="login_twofactorauth_message_entercode_accountname"></span>!
<p>This account is currently using a verification pin.</p>
</div>
然后，我添加了这个javascript：
<script>
function showDiv() {
document.getElementById("login_twofactorauth_message_entercode_accountname").innerHTML = document.getElementById("steamAccountName").value;
document.getElementById("feedback").style.display = 'block';
}
</script>