We Keep Coding

Button not clicking in HTML and JavaScript

My question is the following in JavaScipt and HTML:
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener('сlick', function () {
let textValue = text.value;
console.log("The input is " + textValue)
});
I am sure I connected the HTML to JS correctly via the script attribute.
<div class="input">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button id="button">Добавить</button>
</div>
Here is the part of the Code I want to work, but the Button has no effects. Initially I was putting a lot of fonts on a button and input field in css, but then I deleted them and it still doesn't work. By work I mean to print the input of the input field to the console.

I don't know what it was, but you had some weird character in there I think... all I did was removing the click and the bracket from the AddEventListener function and rewrite it. Strange, I have to admit. Just textValue.Value is wrong it needs to be lowercase textValue.value otherwise it was completely fine.
For all reading, this create a snippet and try run with textValue.value this was not the mistake. The event listener wasn't set up somehow.
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener("click", function () {
let textValue = text.value;
console.log("The input is " + textValue)
});
<div class="input">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button id="button">Добавить</button>
</div>
Edit: so I couldn't leave this open, because many of you and myself were confused by which char could it be. I analyzed it in Notepad++ and wanted to see all chars but there was no invisible char like CR or LF. My next thought was the encoding because #vnikonov_63 was writing cyrillic chars inside his html. What I did was transform the code to Windows-1251 (https://de.wikipedia.org/wiki/Windows-1251) and there you can see the result...
submit.addEventListener('СЃlick', function () {
Everything is the same but not the c. I compared Windows-1251 (cyrillic) and Windows-1250 (https://de.wikipedia.org/wiki/Windows-1250 Middle European) Encodings and the c has the exact same Position. So all of this is just some encoding issue. Surely a cwhich is not really a c as javascript expects it, won't set up a eventlistener because javascript doesn't know a event called СЃlick. As I am not an expert with encodings i can't explain to you why the СЃ shows up as an c but i am pretty sure that was the problem.

I would work with the form tag. There is an event for submit when you click the submit button which is type of submit.
code:
document.querySelector("form").addEventListener("submit", (e) => {
var text = document.querySelector("#inputForm");
console.log(text.value);
});
<form action="javascript:void(0);">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button type="submit">Добавить</button>
</form>

The issue is with the Value property. It should be .value.
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener('click', function () {
let textValue = text.value;
console.log("The input is : " + textValue);
});

I try to pass the content of a paragraph element into a field of a contact form using Javascript

So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">

I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>

Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.

How do I wait for input to be filled in an html page and then print it's value to the console in javascript?

I have a HTML page with an input field
Someone enters some text into it
They click a button
I want to grab the value of the input field AFTER they click the button with some JS code(client-side) and then print it to the console/save it to a file.
How would I go about doing this?
I've tried looking but I can't find anything like this at all :/
Thanks! :)

This example should help you to achieve your goals.
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
// do what ever you wan't
});
<input id="input" type="text" />
<button id="button">Click</button>

Try this:
// This function is called by the HTML code onclick on the button
var get_content_of_input = function(){
var user_input = document.getElementById("text_field").value;
// Now you can use the variable user_input containing the text
}
<input id="text_field">Please enter Text</input>
<button id="button" onclick="get_content_of_input()">Click here to sumbit</button>
The content of the text field will now be saved in the variable "user_input".

pass JavaScript variable to HTML input box and (to use in PHP file)

I'm trying to pass a JavaScript variable to the value of an hidden input button to use in my PHP file output.
My HTML is:
<input type = "hidden" id = "location2" name = "location2" value = ""/>
I'm using this onclick="myFunction();" in my "Submit Form" input to run the function as it is not able to be done in the window.load()
My JavaScript below is calling indexes from another function and assigning the text to the variable 'location' (I know this sounds strange but it was the only way I have got it to work so far):
function myFunction() {
var x = document.getElementById("box2").selectedIndex;
var y = document.getElementById("box2").options;
var location=(y[x].text);
document.getElementById("location2").value=(location);
}
Any help would be hugely appreciated as I am really struggling and have been working on this for some time (as you can probably tell, I dont really know what I'm doing) - I just need to call the value of this variable into my PHP file output and the majority of my web form is completed.
Thanks very much
Marcus
I've just changed my HTML as follows
I've removed myFunction from my submit
I've added the following HTML button:
<button onclick="myFunction();" id = "location2" name = "location2" value="">Click me</button>
The variable is now passing!!!! The only problem is when I press the onclick button, it is now submitting my form!!
Is it okay for me to replace my previous submit button with this code??
THANKS TO EVERYONE FOR THEIR HELP ON THIS!!

I Was not sure what you doing but below example may help you. It will post the value as well as the option text.
Here we are using print_r to print the $_POST array from the AJAX Request. using this method, you should be able to debug the issue.
<!DOCTYPE html>
<html>
<body>
<?php if($_POST) {
print_r($_POST); die;
} ?>
<form name="" id="" method="post" >
Select a fruit and click the button:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<input type = "hidden" id = "location2" name = "location2" value = ""/>
<input type = "hidden" id = "locationname" name = "locationname" value = ""/>
<button type="submit" id="submit">Display index</button>
</form>
<script>
function myFunction() {
var x = document.getElementById("mySelect").selectedIndex;
var y = document.getElementById("mySelect").options;
//alert("Index: " + y[x].index + " is " + y[x].text);
document.getElementById("location2").value=(y[x].index);
document.getElementById("locationname").value=(y[x].text);
//alert($("#location2").val());
}
var submit = document.getElementById('submit');
submit.onsubmit = function(e){
myFunction();
};
</script>
</body>
</html>

i'm assuming your form method is 'POST' and action value is the same php page where you are expecting to see the 'location2' hidden input value, if that is the case, you can use $_POST['location2'] to get the value in that php page.

Yes it is fine to use button tag by default it acts like the submit button inside the form tag. You can also make it act like button(won't submit the form) by using the attribute type='button'.
Edited
button or input type='submit' can submit the form only when it is placed within the form tag(without javascript).
<form action='http://www.stackoverflow.com/'>
<button>stackoverflow</button> <!-- this works -->
</form>
<form action='http://www.stackoverflow.com/'></form>
<button>stackoverflow</button><!-- this won't work -->
var go = function() {
document.forms[0].submit();
};
<form action='http://www.stackoverflow.com/'></form>
<button onclick='go()'>stackoverflow</button><!-- still works -->

Add form input to array with javascript using unshift()

I am trying to add elements to an array via a form. I am using the unshift() method. The code below doesn't work and I would like to know why.
<form>
<input id="input"> </input>
<input type = "button" id="button"> Click me </input>
</form>
<script>
var input = document.getElementById("input").value;
var button = document.getElementById("button");
var myArray = [];
myArray.unshift(input);
button.onclick = function alerted (){
alert(myArray);
};
</script>

Your quoted code runs immediately when the page is loaded. The form field won't have anything in it then, so its value will be ''. When you alert that, the default toString operation on the array will result in '' and the alert will be blank.
You want to run your unshift code in response to a user event, such as the button being clicked, rather than right away. You can do that by setting input to be the element (remove .value from that line) and then moving your line with unshift into the function you're assigning to onclick, adding the .value there:
button.onclick = function alerted (){
myArray.unshift(input.value);
alert(myArray);
};
Other notes:
You never write </input>. Normally you don't close input tags at all. If you're writing XHTML (you probably aren't), you'd put the / within the main input tag like this: <input id="input" />. But again, you're probably not writing XHTML, just HTML.
The value (caption) of an input button goes in its value attribute, not content within opening and closing tags. (You would use opening and closing tags with the button element, not input.)
Taking all of that together, here's a minimalist update: Live copy | source
<form>
<input id="input"><!-- No ending tag -->
<input type = "button" id="button" value="Click me"><!-- No ending tag, move value where it should be -->
</form>
<script>
var input = document.getElementById("input"); // No .value here
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // Moved this line, added the .value
alert(myArray);
};
</script>

DEMO
You need to a) get the value in the click and b) return false if you want the button to not submit. I changed to button. Alternative is <input type="button" value="click me" id="button" />
You may even want to empty and focus the field on click...
<form>
<input id="input" type="text"/>
<button id="button"> Click me </button>
</form>
<script>
var input = document.getElementById("input"); // save the object
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // get the value
alert(myArray);
return false;
};
</script>​

You're not getting the new value in the onclick function.
Try this: http://jsfiddle.net/SeqWN/4/
var button = document.getElementById("button");
var i = document.getElementById("input");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(i.value);
alert(myArray);
};​