Javascript not Pulling values from Form-CodePudding

When trying to value a URL based on values from a from it keeps returning null values, and throwing off the build of the URL.

I validated the ids match and are unique, but I am new to HTML/JavaScript so I am blind to what I am missing.

function displayLink() {
  document.getElementById("link").innerHTML = URL;
}

var site = document.getElementById("site").value;
var prodtest1 = document.getElementById("test").value == "True" ? "-test.com/" : "-prod.com/";
var prodtest2 = document.getElementById("normal").value == "True" ? "test/" : "prod/";
var isBasic = document.getElementById("basic").value == "True" ? "AuthMethod=normal" : "html/public/";
var isHtml5 = document.getElementById("html").value == "True" ? "login.aspx" : "default.aspx";

var URL = Href = "https://"   site   prodtest1   prodtest2   isBasic   isHtml5;

<div>
  <!-- Start Inputs -->
  <Form >
    <input type="text" placeholder="site" id="site">
    <br>
    <input type="checkbox" id="test">
    <label for="test">TEST</label>
    <input type="checkbox" id="normal">
    <Label for="normal">normal</Label>
    <input type="checkbox" id="html">
    <label for="html">html</label>
  </Form>
  <button type="Button" onclick='displayLink()'>Generate Link</button>
  <!-- Inputs End -->
</div>
<!-- Display URL Result -->
<div id="URL">
  <br>
  <a id=Link HREF="Link">
</div>

CodePudding user response：

try this:

function displayLink() {
  var site = document.getElementById("site").value;
  var prodtest1 = document.getElementById("test").checked ? "-test.com/" : "-prod.com/";
  var prodtest2 = document.getElementById("normal").checked ? "test/" : "prod/";
  var isBasic = document.getElementById("basic").checked ? "AuthMethod=normal" : "html/public/";
  var isHtml5 = document.getElementById("html").checked ? "login.aspx" : "default.aspx";

  var URL = Href = "https://"   site   prodtest1   prodtest2   isBasic   isHtml5;

  document.getElementById("Link").innerHTML = URL;
  document.getElementById("Link").href = URL;

}

<div>
  <!-- Start Inputs -->
  <Form >
    <input type="text" placeholder="site" id="site">
    <br>
    <input type="checkbox" id="test">
    <label for="test">TEST</label>
    <input type="checkbox" id="normal">
    <Label for="normal">normal</Label>
    <!-- added -->
    <input type="checkbox" id="basic">
    <label for="html">basic</label>
    <!-- /added -->
    <input type="checkbox" id="html">
    <label for="html">html</label>
  </Form>
  <button type="Button" onclick='displayLink()'>Generate Link</button>
  <!-- Inputs End -->
</div>
<!-- Display URL Result -->
<div id="URL">
  <br>
  <a id=Link HREF="Link">
</div>

If you don't understand something, google it

CodePudding user response：

Your code has some things wrong with it that I noticed:

There's no element with an id of "basic"
You don't have "Link" in quotes in your link at the bottom, you need to put these types of things in quotes
Your variable naming isn't consistent, that might be something to decide on so that your code is a bit more readable.
Because the URL is generated outside of the onClick() function, clicking the button multiple times with, say, different checkboxes activated or a different site entered into the input would have no effect.
Even though the browser will usually let you get away with writing your elements like <input type="checkbox" id="html">, you should really have a closing / at the end of your elements. I.e. <input type="checkbox" id="html" /> This is the syntax for a "self-closing" HTML element, you'll want to add that slash to the end.
You'll have a better time checking if an input box is checked by just doing document.getElementById("element").checked

Have patience with yourself and just make sure you pay attention to these things when you write code. If you "fixed" all of these things (Notice "fixed" is in quotes because there are many correct ways of writing this code) it would look like this:

Html:

<div> 
<!-- Start Inputs -->
  <Form >
    <input type="text" placeholder="site" id="site" /><br>
    
    <input type="checkbox" id="test" />
    <label for="test">TEST</label>
    
    <input type="checkbox" id="normal" />
    <label for="normal">normal</label>
    
    <label for="html">html</label>
    <input type="checkbox" id="html" />
  </Form>
  <button type="Button" onclick='displayLink()'>Generate Link</button>
  <!-- Inputs End -->
  </div>
<!-- Display URL Result -->
<div id="URL">
  <br>
  <a id="link" HREF="" /> <!-- You don't need HREF="" here, but I left it to make it clear it started out as a blank string. -->
 </div>

JavaScript:

function displayLink() {
    
  var siteInput = document.getElementById("site").value;
  var prodTest1 = document.getElementById("test").checked ? "-test.com/" : "-prod.com/";
  var prodTest2 = document.getElementById("normal").checked ? "test/" : "prod/";
// These is no element in your code with an ID of "basic" so this variable has been omitted. 
  var isHtml5 = document.getElementById("html").checked ? "login.aspx" : "default.aspx";
  
  var URL = "https://"   siteInput   prodTest1   prodTest2   isHtml5;
  console.log(URL)
  var linkElement = document.getElementById("link");
  linkElement.innerHTML = URL;
  linkElement.href = URL;
}

CodePudding user response：

For the checkbox type of input, the checked attribute will return a boolean value of true or false for you to use with your ternary conditions.

var prodtest1 = document.getElementById("test").checked ? "-test.com/" : "-prod.com/";

More information is available in the MDN docs