JavaScript - 简单显示Div Incominmessage在2行而不是1 [英] JavaScript - Simple Display Div Incominmessage On 2 Lines Instead Of 1

问题描述

大家好，

我目前正在制作一些Javascript来制作购物车，这样您很快就可以在线从这家三明治餐厅在线订购食物。我有许多主要功能，我一直想要完成。

首先我在按钮点击时对控件进行验证，这样它就可以同时执行所有操作。现在我切换它，以便在选择1选项时将值插入到JSON对象中，我就是在构建对象时进行验证。这需要安静一些工作，但我相信我现在几乎完成了这个。

虽然我在使用这个问题时遇到的一个问题是一个简单的问题我认为应该很容易解决对于你们中的许多人来说。

在我使用多个Div来保存不同的错误信息之前我在div之间有一条断线，所以所有的信息都不在一条线上。现在我正在尝试做所有这一切都在一个div元素中。我有这个使用多个消息，但错误是一切都在一行。我希望每条错误消息都在一个新行上，所以它看起来更干净。



有人可以帮我解决这个问题吗？以下是我目前的情况： -

Hello all,
I am currently working on some Javascript to make a shopping cart so you will soon be able to order food online from this sub sandwich restaurant online. I have many of the main features working that I have been wanting to accomplish.
First I was doing validation of the controls on a button click so it will do them all at once.Now I switched it so as you select 1 option the value is inserted into a JSON object and I am doing the validations as the object is being built. This took quiet a bit of work but I believe I have this almost finished now to.
Although one problem that I have come along when working with this is a simple problem I think that should be easy to solve for many of you.
Before I was using multiple Div’s to hold different error messages and I had a breakline in-between the div’s so all the messages were not on one line.Now I am trying to do all of this in one single div element. I have this working with the multiple messages but the error is everything is on one single line. I would like each error message to be on a new line so it looks a lot cleaner.

Can someone help me solve this problem? Here is what I currently have :-

//this is my current code how I have it working with a single div
//HTML
<!--Add item button -->
		<h4>8). Add Item</h4>
		<button id="addToOrder" type="button">Add to order</button>
        <div id="order-message" class="validation alert"></div>
//JavaScript
        $('.validation').html('');
	    if (! lunchBag.bread) {
            var breadMessage = "You need to select a bread.";
            $('#order-message').html(breadMessage);
            $breadValid.html(breadMessage);
	        isValid = false;
	    }

//old version
		    document.getElementById("breadValid").innerHTML = breadValid;
		    document.getElementById("breadValid btn").innerHTML = breadValidbtn;
		    document.getElementById("fillingValid").innerHTML = fillingMessage;
		    document.getElementById("fillingValidbtn").innerHTML = fillingMessage;

推荐答案

（' < span class =code-string>。validation'）。html（' ' ）;
if （！lunchBag.bread）{
var breadMessage = 您需要选择面包。;

('.validation').html(''); if (! lunchBag.bread) { var breadMessage = "You need to select a bread.";

（' ＃order-message'）。html（breadMessage）;

('#order-message').html(breadMessage);

breadValid html的（breadMessage）;
isValid = false ;
}

// 旧版
< span class =code-sdkkeyword> document .getElementById（ breadValid）。 innerHTML = breadValid;
document .getElementById（ breadValid btn ）。innerHTML = breadValidbtn;
document .getElementById（ fillingValid).innerHTML = fillingMessage;
document .getElementById（ fillingValidbtn).innerHTML = fillingMessage;

breadValid.html(breadMessage); isValid = false; } //old version document.getElementById("breadValid").innerHTML = breadValid; document.getElementById("breadValid btn").innerHTML = breadValidbtn; document.getElementById("fillingValid").innerHTML = fillingMessage; document.getElementById("fillingValidbtn").innerHTML = fillingMessage;

这篇关于JavaScript - 简单显示Div Incominmessage在2行而不是1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！