I have 3 inputs:
<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">
I have a button which calls a function:
<button onclick="myfunction()">click me</button>
This is the JS-function which gets called, it gets the value of all inputs and displays the whole value in a textarea:
function myfunction() {
var x =
"MyText1: " + document.getElementById("id-1").value +
"MyText2: " + document.getElementById("id-2").value +
"MyText3: " + document.getElementById("id-1").value;
document.getElementById("mytext").innerHTML = x; }
This is the area where the functions shows the text of the input fields:
<textarea id="mytext"></textarea>
So far so good. The textarea looks like this:
"MyText1: input of id-1" "MyText2: input of id-2" "MyText3: input of id-3"
What I want to achieve is the following output:
"MyText1: input of id-1"
"MyText2: input of id-2"
"MyText3: input of id-3"
My problem is, when I add document.write("\n"); to the script, the page crashs with following console text: Uncaught TypeError: Cannot read property 'value' of null.
Here a working demo without newline:
https://jsfiddle.net/6nw8jrk9/
You can add a newline character (\n) to the end of each line when you build your string x like so:
var x =
"MyText1: " + document.getElementById("id-1").value + '\n' +
"MyText2: " + document.getElementById("id-2").value + '\n' +
"MyText3: " + document.getElementById("id-1").value;
See working example below:
function myfunction() {
var x =
"MyText1: " + document.getElementById("id-1").value + '\n' +
"MyText2: " + document.getElementById("id-2").value + '\n' +
"MyText3: " + document.getElementById("id-1").value;
document.getElementById("mytext").innerHTML = x;
}
<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">
<br />
<textarea id="mytext"></textarea>
<button onclick="myfunction()">click me</button>
Alternatively, you can use ES6's template literals:
function myfunction() {
var x =
`MyText1: ${ document.getElementById("id-1").value}
MyText2: ${document.getElementById("id-2").value}
MyText3: ${document.getElementById("id-1").value}`;
document.getElementById("mytext").innerHTML = x;
}
<input type="text" id="id-1">
<input type="text" id="id-2">
<input type="text" id="id-3">
<br />
<textarea id="mytext"></textarea>
<button onclick="myfunction()">click me</button>
You should append \n after each input value.
<script>
function myfunction() {
var x =
"MyText1: " + document.getElementById("id-1").value + '\n' +
"MyText2: " + document.getElementById("id-2").value + '\n' +
"MyText3: " + document.getElementById("id-1").value;
document.getElementById("mytext").innerHTML = x;
}
</script>
You can just add line breaks to your var x
var x =
"MyText1: " + document.getElementById("id-1").value + '\n' +
"MyText2: " + document.getElementById("id-2").value + '\n' +
"MyText3: " + document.getElementById("id-1").value;
You can break a line into an textarea with \n or with the HTML entitie
var x =
"MyText1: " + "valueInput" + "\n" +
"MyText2: " + "valueInput" + "
" +
"MyText3: " + "valueInput";
document.getElementById("mytext").innerHTML = x;
<textarea id="mytext"></textarea>
use document.getElementById("mytext").value = x;
eg:
<input type="text" id="id-1" value="aa" />
<input type="text" id="id-2" value="bb" />
<input type="text" id="id-3" value="cc" />
<textarea id="mytext"></textarea>
<button onclick="myfunction()">click me</button>
<script>
function myfunction() {
var x =
"MyText1: " +
document.getElementById("id-1").value +
"\nMyText2: " +
document.getElementById("id-2").value +
"\nMyText3: " +
document.getElementById("id-3").value;
document.getElementById("mytext").value = x;
}
</script>
Related
I set below codes for the the design. i try to get images and name of image form the index.`
function Link_Generate(event) {
event.preventDefault();
var links = '';
var link = 'www.ski-roller.de/';
var result = document.getElementById('wrapper');
var code_id = document.getElementById("code_id").value;
for (i = 1; i < 6; i++) {
links += ' <div class="input-groups">' +
' <input class="form-input" id="link_' + i + '" type="text" name="link_' + i + '" ' +
' value="' + link + i + '/=' + code_id + '" placeholder="Generated Link "/>' +
' <input class="form-button" type="submit" id="' + i + '" value="Copy" onclick="copyToClipboard(this.id)" "/>' +
' <label>Product Name:'+ i +' ' + '<img src="cr05.jpg" alt="cross prime" width="100" height="100"> '+ ' </label>' +
' </div>';
}
result.innerHTML = links;
}
`
I have an issue with the following code.
I am trying to change the content of a variable if a button is clicked and then output the corresponding content as part of a larger output. The output varies depending on if the inner button within the form is clicked.
Can anyone suggest a fix for this code or improvements?
In the output I should see a longer version as the extra block would be appended on to the newly created block and grab new id values generated. Any help would be great.
Here is my code:
<script>
$(document).ready(function() {
var currentID = 1;
$(':button#add').on('click',function() {
currentID++;
var clone = $('#content').clone();
clone.children('.content_title').attr('id', 'title_content-' + currentID);
clone.children('.content_more').attr('id', 'more_content-' + currentID);
clone.attr("id", "content_1");
clone.insertAfter('#content');
if(currentID >= 2) {
document.getElementById("add").style.display = "none";
}
});
});
</script>
</head>
<body>
<div>
<div>
<form action="" method="post">
<h1>Create Code</h1>
<fieldset>
<legend><span class="number"></span>Header</legend>
<label for="name">Title:</label>
<input type = "text" id = "title" />
</fieldset>
<fieldset id = "content">
<legend><span class="number"></span>Content</legend>
<label for="name">Title:</label>
<input class = "content_title" type = "text" id = "title_content" />
<label for="mail">Content:</label>
<input class = "content_more" type = "text" id = "more_content" />
</fieldset>
<input id = "add" type = "button" value = "Add" /> </form>
<button onClick="tryTest()">Code</button>
</div>
<div style = "float:left; width:48%; padding-left:10px;">
<p id="new_block"></p>
</div>
</div>
<script>
function tryTest() {
var quote = '"';
var start = "<pre><div class=" + quote + "newest" + quote + "></pre>";
var title = "title=" + quote + document.getElementById("title").value + quote;
var end = "<pre></div></pre>";
var start_1 = "{{widget type=" + quote + "new_version" + quote;
var title_1 = "title=" + quote + document.getElementById("title_content").value + quote;
var content_1 = "content=" + quote + document.getElementById("more_content").value + quote;
var end_1 = "template=" + quote + "other" + quote + "}}";
var title_2 = "title=" + quote + document.getElementById("title_content-2").value + quote;
var content_2 = "content=" + quote + document.getElementById("more_content-2").value + quote;
var widget = start_1 + "<br />" + title_1 + "<br />" + content_1 + "<br />" + end_1;
var widget_1 = start_1 + "<br />" + title_1 + "<br />" + content_1 + "<br />" + end_1 + start_1 + "<br />" + title_2 + "<br />" + content_2 + "<br />" + end_1;
if(add.clicked == false) {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" widget + "<br /><br />";
} else {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" widget_1 + "<br /><br />"";
}
</script>
This code is a strange mix of jQuery and vanilla JavaScript syntaxes...
But it would work if there was no parse error.
Those error were quite easy to find in a code editor like CodePen, by the way.
if(add.clicked == false) {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" + widget + "<br /><br />";
// Added a missing + sign ---> ---> ---> ---> here -------^
} else {
document.getElementById("new_block").innerHTML = start + "<br />" + title + "<br />" + end + "<br /><br />" + widget_1 + "<br /><br />";
// Added a missing + sign ---> ---> ---> ---> here -------^
}
} // Added this curly bracket to close the tryTest() function.
Just above this code block, is a condition to choose which string to append to new_block.
The if(add.clicked == false) { condition always evaluates to false, because add is not defined. So the property .clicked of undefined, obviously also is undefined...
Then "undefined" == false is false... And makes the else block to always execute.
This condition fixed will avoid the Cannot read property 'value' of null error on "Code" click if the "Add" has not been clicked.
There is a couple ways to determine if the "Add" button has been clicked.
Check if the element title_content-2 exist
Use a boolean "flag" turned to true on "add" click
Adding a class to the "Add" button on click
I will let you think about the solution you would prefer and try it.
Here is your code freed of the mentionned syntax errors in CodePen.
I need to print all the text from inputs in the div "readyorder". So for it prints some of them but I need to print also the text from inputs which are showing up after I click on "AddAuthor". So when I click on "AddAuthor" the next three inputs are showing up and I need to print them in the same div as additional informations. It must happen to all inputs which are showing up. Can I ask for help??
<!DOCTYPE html>
<html>
<body>
<input type="text" name="file-1" />
<input type="text" name="surname-1" />
<input type="submit" value="Add author" id="add_input" />
<form name="add_file" enctype="multipart/form-data" method="post">
</form>
<hr>
<div id="readyorder"></div>
<br />
<script type="text/javascript">
window.onload = Load;
var number = 0;
function Load() {
document.getElementById('add_input').onclick = AddElement;
}
function AddElement() {
var element1 = document.createElement('input');
var element2 = document.createElement('input');
var element3 = document.createElement('input');
var label1 = document.createElement('label');
var label2 = document.createElement('label');
var label3 = document.createElement('label');
var button = document.createElement('input');
label1.innerHTML = "<br />Author's Name " + number + "<br />";
element1.setAttribute('type', 'text');
element1.setAttribute('id', 'name' + number);
element1.setAttribute('placeholder', 'Name...');
label1.appendChild(element1);
label2.innerHTML = '<br /> Initial ' + number + '<br />';
element2.setAttribute('type', 'text');
element2.setAttribute('id', 'initial' + number);
element2.setAttribute('placeholder', 'Initial...');
label2.appendChild(element2);
label3.innerHTML = '<br />Surname ' + number + '<br />';
element3.setAttribute('type', 'text');
element3.setAttribute('id', 'surname' + number);
element3.setAttribute('placeholder', 'surname...');
label3.appendChild(element3);
button.setAttribute('onclick', 'getText(' + number + ')');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Button ' + number);
document.forms['add_file'].appendChild(label1);
document.forms['add_file'].appendChild(label2);
document.forms['add_file'].appendChild(label3);
document.forms['add_file'].appendChild(button);
number++;
}
function getText(id) {
var name = document.getElementById("name" + id);
var initial = document.getElementById("initial" + id);
var surname = document.getElementById("surname" + id);
var div = document.getElementById("readyorder")
var wydawnictwo = document.getElementById("title");
var rokwydania = document.getElementById("otherinfo");
var div = document.getElementById("readyorder")
div.innerHTML = "(" + "," + " " + "s." + " " + page.value + ")" + "(" + name.value + " " + initial.value + "," + " " + "s." + " " + surname.value + ")" + year.value;
}
</script>
</body>
</html>
Array.from(document.querySelectorAll('input[type=text]')).forEach(input =>
console.log(`INPUT of name ${input.name} has value = ${input.value}.`)
)
By that, you will print all text inputs existing in the page.
Array.from(document.querySelectorAll('input[type=text]')).forEach(input =>
console.log(`INPUT of name ${input.name} has value = ${input.value}.`)
)
<input type="text" name="firstname" value="Agg" />
<input type="text" name="lastname" value="Garg" />
function welcome() {
var Name = document.getElementById("name").value;
var form = "<h1>" + "HI " + Name + " READY YOUR REFLEXES!" + "</h1>";
document.write(form);
return false;
}
how to have a css in javascript when onsubmit trigger in another window?
Being quick :
A way for adding a style to your inserted title is to add a class to it :
var form = "<h1 class='myclass'>HI " + Name + " READY YOUR REFLEXES!" + "</h1>";
Then create a css rule:
.myclass{color:red;}
function welcome(){
var Name = document.getElementById("name").value;
//var form = "<h1>" + "HI " + Name + " READY YOUR REFLEXES!" + "</h1>";
var form = "<h1 class='myclass'>HI " + Name + " READY YOUR REFLEXES!" + "</h1>";
document.getElementById("result").innerHTML=form;
return false;
}
.myclass{color:red;}
<button type="button" onclick="welcome()" value="Welcome">Welcome</button>
<input id="name" type="text" value="">
<div id="result"></div>
See below code. I am creating 2 text fields at a time. Now how could I type on one text field and make the other twin text field have the same values simultaneously?
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
<script>
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..."/>' + '<br>' + '</div>' + '</div>');
$(OuterWrapper).append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '">' + '</div>');
x++;
return false;
});
});
</script>
I created a fiddle that I think does what you want: http://jsfiddle.net/3h1h5j7y/
Here is the code.
HTML
<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>
JavaScript
I added a data- attribute to the inputs with the tfCont id so that they can operate in pairs as they are added.
Also, I am using the on() method so that objects can be added dynamically. It is filtering on the fTypex class.
$(document).ready(function() {
var tfCont = 0;
var InputsWrapper = $("#InputsWrapper");
var x = InputsWrapper.length;
var namefield = $("#tfButton");
$(namefield).click(function() {
tfCont++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..." data-tfcount="' + tfCont + '"/>' + '<br>' + '</div>' + '</div>');
$("#OuterWrapper").append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '" data-tfcount="' + tfCont + '">' + '</div>');
x++;
return false;
});
$(document).on("click blur keyup", "input.fTypex", function() {
var tfc = $(this).data("tfcount");
$("#tf_" + tfc).val(this.value);
});
});
I had to change $(OuterWrapper) from your example to $("#OuterWrapper") because there was not a variable.
Try something like this :
use onkeyup to call a function which binds the values
HTML
<body>
<input id='ip1' onkeyup='updateOther(this);' type='text'>
<input id='ip2' type='text'>
<script src="script.js"></script>
</body>
JS:
function updateOther(obj){
$('#ip2').val($(obj).val()) ;
}
http://plnkr.co/edit/dpwav5fGcisZcjBIzYyz?p=preview