I can't seem to figure out how to display the two inputs in the following code as {display: inline} format so that they appear next to each other rather than on separate lines. I've looked at other posts and have tried jQuery, <style> tags, .setAttribute etc. in order to try and add this CSS style.
I've also tried to create a class in the HTML with the requisite display: inline command in the CSS. I created this function to open up once a button on my homepage is clicked. Everything works fine, I just want the two inputs (text and button) to line up next to each other.
Any idea of where I am going wrong? I am a beginner.
var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');
function addInput(divName){
if (counter == limit) {
(counter);
}
else {
nFilter.className = 'input';
newdiv.setAttribute("style", "display: inline;");
newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]'> " + " <input type='button' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
document.getElementById(divName).appendChild(newdiv).span;
counter++;
}
}
Inputs are inline-block by default, so if there is space they will display inline, if not they will wrap to the next line. Either make sure the containing elements are wide enough to accommodate your inputs or try:
newdiv.setAttribute("style", "display: inline;white-space:nowrap;");
to stop the inputs from wrapping, note that this style is applied to the div not the inputs, you may actually want to remove display:inline;.
just using style='float:left;' for each input element
<html>
<head>
<title>this is a test</title>
<meta content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="a"></div>
<script type="text/javascript">
var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');
function addInput(divName){
if (counter != limit) {
newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]' style='float:left;'> " + " <input type='button' style='float:left;' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
addInput("a");
</script>
</body>
</html>
If I get you right, then you want to display two textBoxes when a button is clicked...
You can make it pretty simple and take the document.write command.
e.g.
<body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>
<script>
function makeSmth() {
document.write("<br><input type='text' id='textBox01'></input>");
}
</script>
I think this link may be
handy
In that case, they resolved from the form tag, and creating a css class:
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
Related
My goal is to create 3 inputs where you can choose the color of the cube, the size and the amount of cubes. The picture down below is my classmates final work but he wouldn't give me the code. We were given a template to start on and this is what I have so far.
<style>
.square {
height: 50px;
width: 50px;
background-color: var(color1);
}
</style>
<script>
function makeSquare(size, color){
var div = document.createElement("div");
div.style.display = "inline-block";
div.style.height = size+"px";
div.style.width = size+"px";
div.style.backgroundColor=color;
div.style.margin="5px";
document.body.appendChild(div);
}
function addSquares(){
if (inputColor == "blue")
var color1 = '#555';
}
</script>
</head>
<body>
<p>Number of squares:<input type="text" id="inputNumber"></p>
<p>Color of squares:<input type="text" id="inputColor"></p>
<p>Size of squares:<input type="text" id="inputSize"></p>
<button onclick=addSquares()>Add squares</button>
<div class="square"></div>
</body>
</html>
as you can maybe guess, this does not work and I have no clue how to do this...
I hope you can help me
For example have a look at jQuery css() method. There you can add or remove css styling from an element. I will not post a solution for you because this is clearly your homework but research around this topic and you can handle this task easily.
I am showing you a way to correct your code,
I can't see where you have called makeSquare().
In addSquares(), did you get value of inputColor?
you need to get value of each input and pass SIZE, COLOR(if its not fetched and set earlier stage) and NUMBER in makeSquare()
Need to loop NUMBER's time to get block in body. inside that create you square block with COLOR and SIZE.
I have a DIV in Html that contains several input The idea is to create the Div dynamically with a loop for if I click on the show button it takes a little time to display it is normal since we have 300 input in the DIV but my question is what is possible to display for example the first 10 input then the other 10 and etc ... so that do not wait a time to afichher at the same time
<!DOCTYPE html>
<html>
<body>
<h2>Div </h2>
<input id="ButtonShow" type="button" value="Show" onclick="show();"/>
<div id="p1"></div>
<script>
function show()
{
for (i=0 ;i<350; i++)
{
document.getElementById("p1").innerHTML +=
"<input type='checkbox' value='Callback' checked='checked'/><br>";
}
}
</script>
</body>
</html>
I would use jQuery.
$("#p_id").append("<input type='checkbox' value='Callback' checked='checked'/><br>");
If there are still problems with slow, then you can use setTimeout:
function addCheckBox(offset)
{
$("#p_id").append("<input type='checkbox' value='Callback' checked='checked'/><br>");
if (offset < 290)
window.setTimeout(()=> addCheckBox(offset + 10), 50);
}
addCheckBox(0);
when I run this the "You entered: insert text here" appears for a second and then disappears and the text box clears on its own. I spent 3 hours and I can't see where I'm making my mistake. Any help is appreciated! Thanks.
<!DOCTYPE html>
<html>
<head>
<title> Basic JavaScript </title>
<script type = "text/javascript">
function Copier() {
var firstWord= document.getElementById("Word1").value;
document.write("You entered: " + firstWord);
}
</script>
</head>
<body>
<form>
Word Number 1:
<input type = "text" id = "Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
</form>
</body>
</html>
Don't use document.write() as it is dangerous. Create a separate element with its own id and use innerHTML:
function Copier() {
document.getElementById("output").innerHTML = "You entered: " + document.getElementById("Word1").value;
}
<form>
Word Number 1:
<input type = "text" id = "Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
<p id="output"></p>
</form>
You don't need the form tag.
In case you are using a form tag around your input, the browser assumes that there should be a method defined like:
<form action="post/get" url="some-file.php">
As soon as your JavaScript has grabbed the input, it get's flushed out by the form (re)action, which is pointing to no file specified.
Just leave the form tag and grab the value by the input field itself.
<!DOCTYPE html>
<html>
<head>
<title> Basic JavaScript </title>
<style>
input[type="text"] {
border: 1px solid #565656;
padding: 2px;
color: black;
}
#display {
position: relative;
top: 0;
width: 300px;
height: 30px;
}
</style>
<script type = "text/javascript">
function Copier() {
var firstWord= document.getElementById("Word1").value;
var box = document.getElementById('display');
box.innerHTML = "You entered:" + firstWord;
}
</script>
</head>
<body>
Word Number 1:
<input type="text" id="Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
<div id="display"></div>
</body>
</html>
Using what user 'user2521387' said about the form tag. You should drop the form tag, and if you don't want to use innerHTML you could do something like this:
function Copier() {
var firstWord = document.getElementById("Word1").value;
var box = document.getElementById('display');
//clear all childs of div with id 'display'
while (box.firstChild) { // whilte first child is valid
box.removeChild(box.firstChild); // removes first child
}
var p = document.createElement("p"); //create p tag
p.appendChild(document.createTextNode("You entered:" + firstWord));
box.appendChild(p); //add p tag to div
}
I have div named movingImage that I want to move to the right 50px every time I click a button.
Here's my javascript:
function moving_Image() {
document.getElementById("movingImage").style.right = "50px";
}
And html:
<h1 id="movingImage"> __________ </h1>
<input type="button" value="click me" onclick="moving_Image()">
The element you want to move, needs to have the CSS property position: relative;:
I also changed .style.left to .style.right, you will see why:
var imageOffset = 0
function moving_Image() {
imageOffset += 50
document.getElementById("movingImage").style.left = imageOffset + "px";
}
#movingImage {
position: relative;
}
<h1 id="movingImage">__________</h1>
<input type="button" value="click me" onclick="moving_Image()">
If you don't understand something else, please feel free to ask in the comments.
use this code instead:
<body>
<script>
function movingImage(){
var movingImage = document.getElementById("movingImage").style.left;
movingImage.style.left = movingImage.substring(0,MovingImage.length-1) + 50.toString() + "px";
}
</script>
<h1 id="movingImage" style="position: absolute; left: 0px;">Move Image!</h1>
<input type="button" value="Move, Move Image!" onclick="movingImage()">
</body>
I think CodeiSir has it covered, but I wanted to share a few notes that I made playing around with the code about some general JavaScripty things, as well as a couple of new things I learned today.
1) Separate your JS from your HTML.
This
<input type="button" value="click me" onclick="moving_Image()">
would become
<button>Click me</button>
and
document.querySelector('button').onclick = moving_Image;
2) There's an element called offsetLeft (also offsetRight, obvs) which is a read-only attribute that shows by how much the upper left corner of the current element is offset to the left. So we can, for example, write:
div.style.left = (div.offsetLeft + amount) + 'px';
3) It might be fun to have a range of buttons that move the element different amounts, perhaps by adding data attributes to the buttons:
<button data-amount="50">by 50</button>
We can then process that amount using the dataset attribute in the function.
function movingImage(e) {
var amount = +e.target.dataset.amount;
div.style.left = (div.offsetLeft + amount) + 'px';
}
The code in full. Note I'm also passing in the div element with the click event.
HTML
<div id="movingImage"> __________ </div>
<button data-amount="5">by 5</button>
<button data-amount="20">by 20</button>
<button data-amount="50">by 50</button>
JS
function movingImage(el, e) {
// adding a preceding + coerces the string to an integer
var amount = +e.target.dataset.amount;
el.style.left = (el.offsetLeft + amount) + 'px';
}
var div = document.getElementById("movingImage");
var buttons = document.querySelectorAll('button');
// [].slice.call basically makes the nodelist an array
// so that you can use the native array functions on it.
[].slice.call(buttons).forEach(function (button) {
// here were just binding the div element to the click
// event. We could just have easily written
// button.onclick = movingImage;
// and then referred to div instead of el in the function
button.onclick = movingImage.bind(this, div);
});
DEMO
This is My Version to move a div left to right using javascript:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>
Click the "Try it" button to position the DIV element 100 pixels from the right edge:
</p>
<p>
<strong>Note:</strong> If the position property is set to "static", the right property has no effect.
</p>
<button onclick="myFunction()">Try it</button>
<div id="movingImage">
This is My Div!!
</div>
<script>
function myFunction() {
let movingImage = document.getElementById("movingImage");
if (movingImage.style.right = "100px") {
movingImage.style.right = "0px";
} else {
movingImage.style.right = "100px";
}
}
</script>
</body>
</html>
src: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_left
https://www.w3schools.com/jsref/jsref_if.asp
I need your help,
How can I go about copying text (with the line breaks included) from my table and put it back into the textarea “newtext”
My existing coding doesn't seem to be working.
<html>
<head>
<style type="text/css">
.box { width: 400px; height: 50px; }
</style>
<script type="text/javascript">
function ta() {
taValue = document.getElementById("ta").value
taValue = taValue.replace(/\n/g, '<br/>')
document.getElementById("tatext").innerHTML = taValue
}
function text2area() {
document.getElementById("newtext").innerHTML = document.getElementById("tatext").innerHTML
}
</script>
</head>
<textarea class="box" id="ta" onkeyup="ta()"></textarea>
<table id="tatable"><tr><td><div id="tatext"></div></td></tr></table>
<br>
<input type="button" onclick="text2area()" value="move text">
<br><br>
<textarea class="box" id="newtext"></textarea>
</html>
Instead of using the function innerHTML, grab the value of the text area you want to capture, and set the value of the new text area to this. You are already using value for the variable taValue. Also, it's better practice to use addEventListener for your clicks and keyups.
function ta() {
taValue = document.getElementById("ta").value
taValue = taValue.replace(/\n/g, '<br/>')
document.getElementById("tatext").value = taValue;
}
function text2area() {
taValue = document.getElementById("ta").value;
document.getElementById("newtext").value = taValue;
}
document.getElementById("ta").addEventListener ("onkeyup", ta, false);
document.getElementById("move-text").addEventListener ("click", text2area, false);
JSFiddle: http://jsfiddle.net/tMJ84/1/
textarea does not have an innerHTML. Notice how you grabbed the value? Set it the same way! It is like this because it is a form element.
document.getElementById("tatext").value = taValue; //semi-colons are just good practice
and here:
document.getElementById("newtext").value = document.getElementById("tatext").value;