Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Playing Audio Using Keystrokes: Is It Possible?

Annabelle5893

Annabelle5893

Gold Coder
I'm wondering, how would I make an app that plays audio files using the keys on the number pad? Specifically, I want to make an app that triggers "Rotary Pulse 1" by pressing 1 on the numeric keypad, all the way up to "Rotary Pulse 0" on the 0 key. A dial tone will be toggled on by pressing the spacebar, which will begin with a "receiver pickup" noise. The dial tone turns off when digits are dialed via the numeric keypad. If you press the spacebar either when the dial tone is on, or after dialing a number, a "Receiver Hang Up" noise will be triggered. With the rotary dial sounds, the dial turning to the fingerhole is triggered at key down, and the release of the dial returning to the resting position will be triggered by releasing of the number corresponding to the fingerhole (1, 2, 3, 4, 5, 6, 7, 8, 9, 0). This will be accompanied by the internal sound of the dial pulses as heard in a telephone. What is the code I would use to make this audio app using HTML?
 
Sort by date Sort by votes
Annabelle5893 said:
On a side note, in Javascript, how do I write that I'd like to "show" or "hide" a parameter if a checkbox is checked or unchecked?
Click to expand...
Not sure what you mean by "show/hide a parameter"... I mean you can show/hide elements in the html... but if you are referring to actual js variable parameters, there be no actual way to hide them... other than not include them. Can you clarify for me what you meant?
 
Upvote 0 Downvote
Annabelle5893 said:
Sorry for the confusion! I meant show or hide HTML elements.
Click to expand...
You can do this one of 2 ways:

1)
JavaScript: 
var checkbox = document.queryString('#checkBoxID');
if (checkbox.checked) {
    document.queryString('#elmentID').setAttribute('style', 'display: none');
}
else {
    document.queryString('#elmentID').setAttribute('style', 'display: block');
}

OR

2)
CSS: 
.hide {
    display: none;
}

JavaScript: 
var checkbox = document.queryString('#checkBoxID');
if (checkbox.checked) {
    document.queryString('#elmentID').classList.add('hide');
}
else {
    document.queryString('#elmentID').classList.remove('hide');
}

First option, will set the inline style attribute to display none/block.. the second option you are creating a css style and just adding/removing the class depending on the condition
 
Upvote 0 Downvote
Antero360 said:
You can do this one of 2 ways:

1)
JavaScript: 
var checkbox = document.queryString('#checkBoxID');
if (checkbox.checked) {
    document.queryString('#elmentID').setAttribute('style', 'display: none');
}
else {
    document.queryString('#elmentID').setAttribute('style', 'display: block');
}

OR

2)
CSS: 
.hide {
    display: none;
}

JavaScript: 
var checkbox = document.queryString('#checkBoxID');
if (checkbox.checked) {
    document.queryString('#elmentID').classList.add('hide');
}
else {
    document.queryString('#elmentID').classList.remove('hide');
}

First option, will set the inline style attribute to display none/block.. the second option you are creating a css style and just adding/removing the class depending on the condition"
Click to expand...
So "
.classList.add('hide');
}
is to hide an element, and "
.classList.remove('hide');
}
lets the element be shown again?
 
Upvote 0 Downvote
Antero360 said:
yup
Click to expand...
This is for another app I'm making, but when I tried that, I'm not sure what happened. Here's what I put in the code, where there are text areas named "Family Name For Couple", "Spouse 1 Family Name", and "Spouse 2 Family Name". Here's the code I have.
Code: 
            <div class="panel-body">
                <div data-tab-body="step-2" style="visibility: visible;">
                    <div class="alert alert-info">
<details><summary><strong>The Basics:</strong></summary><p>To begin, enter the given names of the couple, the family name(s) they'll be using after their marriage, and the city/town, then select the state/province, and country in which the wedding will take place.</p></details>
</div>

                    <div class="row form-group">
                        <div class="col-sm-4">
                            <label class="radio"><input checked="checked" name="basicInfo[spouse_one]" value="woman" type="radio"> Bride</label>
                            <label class="radio"><input name="basicInfo[spouse_one]" value="man" type="radio"> Groom</label></br>
                            <label class="radio"><input name="basicInfo[spouse_one]" value="custom" type="radio"> Other</label></br>
                            &nbsp;&nbsp;
<label for="Spouse1Name" <p>spouse1Name<textarea class="spouse1Name">_ _ _ _</textarea></p></label>
                            <div class="clearfix"></div>

                            <label class="radio"><input name="basicInfo[spouse_two]" value="woman" type="radio"> Bride</label>
                            <label class="radio"><input checked="checked" name="basicInfo[spouse_two]" value="man" type="radio"> Groom</label></br>
                            <label class="radio"><input name="basicInfo[spouse_two]" value="custom" type="radio"> Other</label></br>
                            &nbsp;&nbsp;
<label for="Spouse2Name" <p>spouse2Name<textarea class="spouse1Name">_ _ _ _</textarea></p></label>
</div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="col-sm-4" id="same-family-name-container">
<label for="FamilyNameForCouple"> <p>Family Name For Couple<textarea class="Couple'sFamilyName">_ _ _ _</textarea></p></label>
                        </div>
</div>
                            </div>
                            <label class="checkbox"><input checked="checked" name="SameFamilyName" value="FamilyNameForCouple" type="checkbox"> The Couple Plans To Use The Same Family Name After Marriage</label>
                        <div class="col-sm-4" id="different-family-name-container">
<label for="Spouse1FamilyName"> <p>Spouse 1 Family Name<textarea class="Spouse1FamilyName">_ _ _ _</textarea></p></label>
<label for="Spouse2FamilyName"> <p>Spouse 2 Family Name<textarea class="Spouse2FamilyName">_ _ _ _</textarea></p></label>
</div>
                            
                    <div class="row form-group">
<div class="col-sm-4">
<label for="City/Town"> <p>City/Town<textarea class="City/Town">_ _ _ _</textarea></p></label>
</div>
<label>State/Province</label>
  <select class="form-control" id="state/province">
  <option value="Choose one... selected">Choose one...  --</option>
  <option value="Alabama">Alabama</option>
  <option value="Alaska">Alaska</option>
  <option value="Alberta">Alberta</option>
  <option value="Arizona">Arizona</option>
  <option value="Arkansas">Arkansas</option>
  <option value="Australian Capital Territory">Australian Capital Territory</option>
<option value="Baker Island">Baker Island</option>
  <option value="British Columbia">British Columbia</option>
  <option value="California">California</option>
  <option value="Christmas Island">Christmas Island</option>
  <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
  <option value="Colorado">Colorado</option>
  <option value="Connecticut">Connecticut</option>
  <option value="Coral Sea Islands">Coral Sea Islands</option>
  <option value="Delaware">Delaware</option>
  <option value="Florida">Florida</option>
  <option value="Georgia">Georgia</option>
  <option value="Hawaii">Hawaii</option>
  <option value="Heard Island And McDonald Islands">Heard Island And McDonald Islands</option>
<option value="Howland Island">Howland Island</option>
  <option value="Idaho">Idaho</option>
  <option value="Illinois">Illinois</option>
  <option value="Indiana">Indiana</option>
  <option value="Iowa">Iowa</option>
  <option value="Jarvis Island">Jarvis Island</option>
  <option value="Johnston Atoll">Johnston Atoll</option>
  <option value="Kansas">Kansas</option>
  <option value="Kentucky">Kentucky</option>
<option value="Kingman Reef">Kingman Reef</option>
  <option value="Louisiana">Louisiana</option>
  <option value="Maine">Maine</option>
  <option value="Manitoba">Manitoba</option>
  <option value="Maryland">Maryland</option>
  <option value="Massachusetts">Massachusetts</option>
  <option value="Michigan">Michigan</option>
  <option value="Midway Islands">Midway Islands</option>
  <option value="Minnesota">Minnesota</option>
  <option value="Mississippi">Mississippi</option>
  <option value="Missouri">Missouri</option>
  <option value="Montana">Montana</option>
  <option value="Nebraska">Nebraska</option>
  <option value="Nevada">Nevada</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="New Hampshire">New Hampshire</option>
  <option value="New Jersey">New Jersey</option>
  <option value="New Mexico">New Mexico</option>
  <option value="New South Wales">New South Wales</option>
  <option value="New York">New York</option>
  <option value="Newfoundland">Newfoundland</option>
  <option value="North Carolina">North Carolina</option>
  <option value="North Dakota">North Dakota</option>
  <option value="Northern Territory">Northern Territory</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Ohio">Ohio</option>
  <option value="Oklahoma">Oklahoma</option>
  <option value="Ontario">Ontario</option>
  <option value="Oregon">Oregon</option>
  <option value="Palmyra Atoll">Palmyra Atoll</option>
  <option value="Pennsylvania">Pennsylvania</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Québec">Québec</option>
  <option value="Rhode Island">Rhode Island</option>
  <option value="Seskatchewan">Seskatchewan</option>
  <option value="South Australia">South Australia</option>
  <option value="South Carolina">South Carolina</option>
  <option value="South Dakota">South Dakota</option>
  <option value="Tasmania">Tasmania</option>
  <option value="Tennessee">Tennessee</option>
  <option value="Texas">Texas</option>
  <option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Victoria">Victoria</option>
<option value="Virginia">Virginia</option>
  <option value="Wake Island">Wake Island</option>
  <option value="Washington">Washington</option>
<option value="Washington, DC">Washington, DC</option>
<option value="West Virginia">West Virginia</option>
<option value="Western Australia">Western Australia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="Yukon Territory">Yukon Territory</option>
<option value="Not Applicable">Not Applicable</option>
</select>

<label>Country</label>
  <select class="form-control" id="country">
  <option value="Choose one... selected">Choose one...</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Åland Islands">Åland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
  <option value="American Samoa">American Samoa</option>
  <option value="Andora">Andora</option>
  <option value="Angola">Angola</option>
  <option value="Anguilla">Anguilla</option>
  <option value="Antarctica">Antarctica</option>
  <option value="Antigua And Barbuda">Antigua And Barbuda</option>
  <option value="Argentina">Argentina</option>
  <option value="Armenia">Armenia</option>
  <option value="Aruba">Aruba</option>
  <option value="Ascension Island">Ascension Island</option>
  <option value="Ashmore And Cartier Islands">Ashmore And Cartier Islands</option>
  <option value="Australia">Australia</option>
  <option value="Austria">Austria</option>
  <option value="Azerbaijan">Azerbaijan</option>
  <option value="Bahamas">Bahamas</option>
  <option value="Bahrain">Bahrain</option>
  <option value="Bangladesh">Bangladesh</option>
  <option value="Barbados">Barbados</option>
  <option value="Belarus">Belarus</option>
  <option value="Belgium">Belgium</option>
  <option value="Belize">Belize</option>
  <option value="Benin">Benin</option>
  <option value="Bermuda">Bermuda</option>
  <option value="Bhutan">Bhutan</option>
  <option value="Bolivia">Bolivia</option>
  <option value="Bosnia And Herzegovina">Bosnia And Herzegovina</option>
  <option value="Botswana">Botswana</option>
  <option value="Bouvet Island">Bouvet Island</option>
  <option value="Brazil">Brazil</option>
  <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
  <option value="British Virgin Islands">British Vergin Islands</option>
  <option value="Brunei Darussalam">Brunei Darussalam</option>
  <option value="Bulgaria">Bulgaria</option>
  <option value="Burkina Faso">Burkina Faso</option>
  <option value="Burundi">Burundi</option>
  <option value="Cambodia">Cambodia</option>
  <option value="Cameroon">Cameroon</option>
  <option value="Canada">Canada</option>
  <option value="Cape Verde">Cape Verde</option>
  <option value="Cayman Islands">Cayman Islands</option>
  <option value="Central African Republic">Central African Republic</option>
  <option value="Chad">Chad</option>
  <option value="Chile">Chile</option>
  <option value="China">China</option>
  <option value="Colombia">Colombia</option>
  <option value="Comoros">Comoros</option>
  <option value="Congo">Congo</option>
  <option value="Cook Islands">Cook Islands</option>
  <option value="Costa Rica">Costa Rica</option>
  <option value="Cote d'Ivoire">Cote d'Ivoire</option>
  <option value="Croatia">Croatia</option>
  <option value="Cuba">Cuba</option>
  <option value="Cyprus">Cyprus</option>
  <option value="Czech Republic">Czech Republic</option>
  <option value="Democratic Republic Of Congo">Democratic Republic Of Congo</option>
  <option value="Denmark">Denmark</option>
  <option value="Djibouti">Djibouti</option>
  <option value="Dominica">Dominica</option>
  <option value="Dominican Republic">Dominican Republic</option>
  <option value="Ecuador">Ecuador</option>
  <option value="Egypt">Egypt</option>
  <option value="El Salvador">El Salvador</option>
  <option value="Equatorial Guinea">Equatorial Guinea</option>
  <option value="Eritria">Eritria</option>
  <option value="Estonia">Estonia</option>
  <option value="Ethiopia">Ethiopia</option>
  <option value="Færoe Islands">Færoe Islands</option>
  <option value="Falkland Islands">Falkland Islands</option>
  <option value="Fiji islands">Fiji Islands</option>
  <option value="Finland">Finland</option>
  <option value="France">France</option>
  <option value="French Guiana">French Guiana</option>
  <option value="French Polynesia">French Polynesia</option>
  <option value="French Southern And Antarctic Lands">French Southern And Antarctic Lands</option>
  <option value="Gabon">Gabon</option>
  <option value="Gambia">Gambia</option>
  <option value="Georgia">Georgia</option>
  <option value="Germany">Germany</option>
  <option value="Ghana">Ghana</option>
  <option value="Greece">Greece</option>
  <option value="Greenland">Greenland</option>
  <option value="Grenada">Grenada</option>
  <option value="Guadeloupe">Guadeloupe</option>
  <option value="Guam">Guam</option>
  <option value="Guatemala">Guatemala</option>
  <option value="Guernsey">Guernsey</option>
  <option value="Guinea">Guinea</option>
  <option value="Guinea-Bissau">Guinea-Bissau</option>
  <option value="Guyana">Guyana</option>
  <option value="Haiti">Haiti</option>
  <option value="Honduras">Honduras</option>
  <option value="Hong Kong">Hong Kong</option>
  <option value="Hungary">Hungary</option>
  <option value="Iceland">Iceland</option>
  <option value="India">India</option>
  <option value="Indonesia">Indonesia</option>
  <option value="Iran">Iran</option>
  <option value="Iraq">Iraq</option>
  <option value="Ireland">Ireland</option>
  <option value="Isle Of Man">Isle Of Man</option>
  <option value="Israel">Israel</option>
  <option value="Italy">Italy</option>
  <option value="Jamaica">Jamaica</option>
  <option value="Japan">Japan</option>
  <option value="Jersey">Jersey</option>
  <option value="Jordan">Jordan</option>
  <option value="Kazakhstan">Kazakhstan</option>
  <option value="Kenya">Kenya</option>
  <option value="Kiribati">Kiribati</option>
  <option value="Korea">Korea</option>
  <option value="Kuwait">Kuwait</option>
  <option value="Kyrgyzstan">Kyrgyzstan</option>
  <option value="Laos">Laos</option>
  <option value="Latvia">Latvia</option>
  <option value="Lebanon">Lebanon</option>
  <option value="Lesotho">Lesotho</option>
  <option value="Liberia">Liberia</option>
  <option value="Libya">Libya</option>
  <option value="Liechtenstein">Liechtenstein</option>
  <option value="Lithuania">Lithuania</option>
  <option value="Luxembourg">Luxembourg</option>
  <option value="Macao">Macao</option>
  <option value="Macedonia">Macedonia</option>
  <option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Maldives">Maldives</option>
  <option value="Mali">Mali</option>
  <option value="Malta">Malta</option>
  <option value="Marshall Islands">Marshall Islands</option>
  <option value="Martanique">Martanique</option>
  <option value="Mauritania">Mauritania</option>
  <option value="Mauritious">Mauritious</option>
  <option value="Mayotte">Mayotte</option>
  <option value="México">México</option>
  <option value="Micronesia">Micronesia</option>
  <option value="Moldova">Moldova</option>
  <option value="Monaco">Monaco</option>
  <option value="Mongolia">Mongolia</option>
  <option value="Montserrat">Montserrat</option>
  <option value="Morocco">Morocco</option>
  <option value="Mozambique">Mozambique</option>
  <option value="Namibia"><Namibia/option>
  <option value="Nauru">Nauru</option>
  <option value="Netherlands">Netherlands</option>
  <option value="Netherlands Antilles">Netherlands Antilles</option>
  <option value="New Caledonia">New Caledonia</option>
  <option value="New Zealand">New Zealand</option>
  <option value="Nicaragua">Nicaragua</option>
  <option value="Niger">Niger</option>
  <option value="Nigeria">Nigeria</option>
  <option value="Niue">Niue</option>
  <option value="Norfolk Island">Norfolk Island</option>
  <option value="North Korea">North Korea</option>
  <option value="Northern Mariana Islands">Northern Mariana Islands</option>
  <option value="Norway">Norway</option>
  <option value="Oman">Oman</option>
  <option value="Pakistan">Pakistan</option>
  <option value="Palau">Palau</option>
  <option value=Palestine>Palestine</option>
  <option value="Panama">Panama</option>
  <option value="Papua New Guinea">Papua New Guinea</option>
  <option value="Paraguay">Paraguay</option>
  <option value="Peru">Peru</option>
  <option value="Philippines">Philippines</option>
  <option value="Pitcairn Islands">Pitcairn Islands</option>
  <option value="Poland">Poland</option>
  <option value="Portugal">Portugal</option>
  <option value="Puerto Rico">Puerto Rico</option>
  <option value="Qatar">Qatar</option>
  <option value="Réunion">Réunion</option>
  <option value="Romania">Romania</option>
  <option value="Russia">Russia</option>
  <option value="Rwanda">Rwanda</option>
  <option value="Saint Helena">Saint Helena</option>
  <option value="Saint Kits And Nevis">Saint Kitts And Nevis</option>
  <option value="Saint Pierre And Miquelon">Saint Pierre And Miquelon</option>
  <option value="Saint Vincent And The Grenadines">Saint Vincent And The Grenadines</option>
  <option value="Samoa">Samoa</option>
  <option value="San Marino">San Marino</option>
  <option value="São Tomé And Príncipe">São Tomé And Príncipe</option>
  <option value="Saudi Arabia">Saudi Arabia</option>
  <option value="Senegal">Senegal</option>
  <option value="Serbia">Serbia</option>
  <option value="Seychelles">Seychelles</option>
  <option value="Singapore">Singapore</option>
  <option value="Slovak Republic">Slovak Republic</option>
  <option value="Slovenia">Slovenia</option>
  <option value="Solomon Islands">Solomon Islands</option>
  <option value="somalia">Somalia</option>
  <option value="South Africa">South Africa</option>
  <option value="South Georgia And The South Sandwich Islands">South Georgia And The South Sandwich Islands</option>
  <option value="South Korea">South Korea</option>
  <option value="Sudan">Sudan</option>
  <option value="Suriname">Suriname</option>
  <option value="Svalbard And Jan Mayen Islands">Svalbard And Jan Mayen Islands</option>
  <option value="Swaziland">Swaziland</option>
  <option value="Sweden">Sweden</option>
  <option value="Switzerland">Switzerland</option>
  <option value="Syria">Syria</option>
  <option value="Taiwan">Taiwan</option>
  <option value="Tajikistan">Tajikistan</option>
  <option value="Tanzania">Tanzania</option>
  <option value="Thailand">Thailand</option>
  <option value="Timor Leste">Timor Leste</option>
  <option value="Togo">Togo</option>
  <option value="Tokelau">Tokelau</option>
  <option value="Tonga">Tonga</option>
  <option value="Trinidad And Tobago">Trinidad And Tobago</option>
  <option value="Turkey">Turkey</option>
  <option value="Turkmenistan">Turkmenistan</option>
  <option value="Turks And Caicos Islands">Turks And Caicos Islands</option>
  <option value="Tuvalu">Tuvalu</option>
  <option value="Uganda">Uganda</option>
  <option value="Ukraine">Ukraine</option>
  <option value="United Arab Emirates">United Arab Emirates</option>
  <option value="United Kingdom Of Great Britain">United Kingdom Of Great Britain</option>
  <option value="United States Of America">United States Of America</option>
  <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
  <option value="United States Virgin Islands">United States Virgin Islands</option>
  <option value="Uruguay">Uruguay</option>
  <option value="Uzbekistan">Uzbekistan</option>
  <option value="Vanuatu">Vanuatu</option>
  <option value="Vatican City">Vatican City</option>
  <option value="Venezuela">Venezuela</option>
  <option value="Vietnam">Vietnam</option>
  <option value="Wallis and Futuna">Wallis and Futuna</option>
  <option value="Yemen">Yemen</option>
  <option value="Zaire">Zaire</option>
  <option value="Zambia">Zambia</option>
  <option value="Zimbabwe">Zimbabwe</option>
</select>

<button class="btn btn-primary pull-left" type="button" data-tab-continue="step-1">
Back
</button>

<button class="btn btn-primary pull-right" type="button" data-tab-continue="step-3">
Next
</button>
<script language="javascript">
var checkbox = document.queryString('SameFamilyName');
if (checkbox.checked) {
    document.queryString('same-family-name-container').classList.remove('hide');
    document.queryString('different-family-name-container').classList.add('hide');
}
else {
    document.queryString('same-family-name-container').classList.add('hide');
    document.queryString('different-family-name-container').classList.remove('hide');
}
</script>
 
Upvote 0 Downvote
Annabelle5893 said:
This is for another app I'm making, but when I tried that, I'm not sure what happened. Here's what I put in the code, where there are text areas named "Family Name For Couple", "Spouse 1 Family Name", and "Spouse 2 Family Name". Here's the code I have.
Code: 
            <div class="panel-body">
                <div data-tab-body="step-2" style="visibility: visible;">
                    <div class="alert alert-info">
<details><summary><strong>The Basics:</strong></summary><p>To begin, enter the given names of the couple, the family name(s) they'll be using after their marriage, and the city/town, then select the state/province, and country in which the wedding will take place.</p></details>
</div>

                    <div class="row form-group">
                        <div class="col-sm-4">
                            <label class="radio"><input checked="checked" name="basicInfo[spouse_one]" value="woman" type="radio"> Bride</label>
                            <label class="radio"><input name="basicInfo[spouse_one]" value="man" type="radio"> Groom</label></br>
                            <label class="radio"><input name="basicInfo[spouse_one]" value="custom" type="radio"> Other</label></br>
                            &nbsp;&nbsp;
<label for="Spouse1Name" <p>spouse1Name<textarea class="spouse1Name">_ _ _ _</textarea></p></label>
                            <div class="clearfix"></div>

                            <label class="radio"><input name="basicInfo[spouse_two]" value="woman" type="radio"> Bride</label>
                            <label class="radio"><input checked="checked" name="basicInfo[spouse_two]" value="man" type="radio"> Groom</label></br>
                            <label class="radio"><input name="basicInfo[spouse_two]" value="custom" type="radio"> Other</label></br>
                            &nbsp;&nbsp;
<label for="Spouse2Name" <p>spouse2Name<textarea class="spouse1Name">_ _ _ _</textarea></p></label>
</div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="col-sm-4" id="same-family-name-container">
<label for="FamilyNameForCouple"> <p>Family Name For Couple<textarea class="Couple'sFamilyName">_ _ _ _</textarea></p></label>
                        </div>
</div>
                            </div>
                            <label class="checkbox"><input checked="checked" name="SameFamilyName" value="FamilyNameForCouple" type="checkbox"> The Couple Plans To Use The Same Family Name After Marriage</label>
                        <div class="col-sm-4" id="different-family-name-container">
<label for="Spouse1FamilyName"> <p>Spouse 1 Family Name<textarea class="Spouse1FamilyName">_ _ _ _</textarea></p></label>
<label for="Spouse2FamilyName"> <p>Spouse 2 Family Name<textarea class="Spouse2FamilyName">_ _ _ _</textarea></p></label>
</div>
                           
                    <div class="row form-group">
<div class="col-sm-4">
<label for="City/Town"> <p>City/Town<textarea class="City/Town">_ _ _ _</textarea></p></label>
</div>
<label>State/Province</label>
  <select class="form-control" id="state/province">
  <option value="Choose one... selected">Choose one...  --</option>
  <option value="Alabama">Alabama</option>
  <option value="Alaska">Alaska</option>
  <option value="Alberta">Alberta</option>
  <option value="Arizona">Arizona</option>
  <option value="Arkansas">Arkansas</option>
  <option value="Australian Capital Territory">Australian Capital Territory</option>
<option value="Baker Island">Baker Island</option>
  <option value="British Columbia">British Columbia</option>
  <option value="California">California</option>
  <option value="Christmas Island">Christmas Island</option>
  <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
  <option value="Colorado">Colorado</option>
  <option value="Connecticut">Connecticut</option>
  <option value="Coral Sea Islands">Coral Sea Islands</option>
  <option value="Delaware">Delaware</option>
  <option value="Florida">Florida</option>
  <option value="Georgia">Georgia</option>
  <option value="Hawaii">Hawaii</option>
  <option value="Heard Island And McDonald Islands">Heard Island And McDonald Islands</option>
<option value="Howland Island">Howland Island</option>
  <option value="Idaho">Idaho</option>
  <option value="Illinois">Illinois</option>
  <option value="Indiana">Indiana</option>
  <option value="Iowa">Iowa</option>
  <option value="Jarvis Island">Jarvis Island</option>
  <option value="Johnston Atoll">Johnston Atoll</option>
  <option value="Kansas">Kansas</option>
  <option value="Kentucky">Kentucky</option>
<option value="Kingman Reef">Kingman Reef</option>
  <option value="Louisiana">Louisiana</option>
  <option value="Maine">Maine</option>
  <option value="Manitoba">Manitoba</option>
  <option value="Maryland">Maryland</option>
  <option value="Massachusetts">Massachusetts</option>
  <option value="Michigan">Michigan</option>
  <option value="Midway Islands">Midway Islands</option>
  <option value="Minnesota">Minnesota</option>
  <option value="Mississippi">Mississippi</option>
  <option value="Missouri">Missouri</option>
  <option value="Montana">Montana</option>
  <option value="Nebraska">Nebraska</option>
  <option value="Nevada">Nevada</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="New Hampshire">New Hampshire</option>
  <option value="New Jersey">New Jersey</option>
  <option value="New Mexico">New Mexico</option>
  <option value="New South Wales">New South Wales</option>
  <option value="New York">New York</option>
  <option value="Newfoundland">Newfoundland</option>
  <option value="North Carolina">North Carolina</option>
  <option value="North Dakota">North Dakota</option>
  <option value="Northern Territory">Northern Territory</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Ohio">Ohio</option>
  <option value="Oklahoma">Oklahoma</option>
  <option value="Ontario">Ontario</option>
  <option value="Oregon">Oregon</option>
  <option value="Palmyra Atoll">Palmyra Atoll</option>
  <option value="Pennsylvania">Pennsylvania</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Québec">Québec</option>
  <option value="Rhode Island">Rhode Island</option>
  <option value="Seskatchewan">Seskatchewan</option>
  <option value="South Australia">South Australia</option>
  <option value="South Carolina">South Carolina</option>
  <option value="South Dakota">South Dakota</option>
  <option value="Tasmania">Tasmania</option>
  <option value="Tennessee">Tennessee</option>
  <option value="Texas">Texas</option>
  <option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Victoria">Victoria</option>
<option value="Virginia">Virginia</option>
  <option value="Wake Island">Wake Island</option>
  <option value="Washington">Washington</option>
<option value="Washington, DC">Washington, DC</option>
<option value="West Virginia">West Virginia</option>
<option value="Western Australia">Western Australia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="Yukon Territory">Yukon Territory</option>
<option value="Not Applicable">Not Applicable</option>
</select>

<label>Country</label>
  <select class="form-control" id="country">
  <option value="Choose one... selected">Choose one...</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Åland Islands">Åland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
  <option value="American Samoa">American Samoa</option>
  <option value="Andora">Andora</option>
  <option value="Angola">Angola</option>
  <option value="Anguilla">Anguilla</option>
  <option value="Antarctica">Antarctica</option>
  <option value="Antigua And Barbuda">Antigua And Barbuda</option>
  <option value="Argentina">Argentina</option>
  <option value="Armenia">Armenia</option>
  <option value="Aruba">Aruba</option>
  <option value="Ascension Island">Ascension Island</option>
  <option value="Ashmore And Cartier Islands">Ashmore And Cartier Islands</option>
  <option value="Australia">Australia</option>
  <option value="Austria">Austria</option>
  <option value="Azerbaijan">Azerbaijan</option>
  <option value="Bahamas">Bahamas</option>
  <option value="Bahrain">Bahrain</option>
  <option value="Bangladesh">Bangladesh</option>
  <option value="Barbados">Barbados</option>
  <option value="Belarus">Belarus</option>
  <option value="Belgium">Belgium</option>
  <option value="Belize">Belize</option>
  <option value="Benin">Benin</option>
  <option value="Bermuda">Bermuda</option>
  <option value="Bhutan">Bhutan</option>
  <option value="Bolivia">Bolivia</option>
  <option value="Bosnia And Herzegovina">Bosnia And Herzegovina</option>
  <option value="Botswana">Botswana</option>
  <option value="Bouvet Island">Bouvet Island</option>
  <option value="Brazil">Brazil</option>
  <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
  <option value="British Virgin Islands">British Vergin Islands</option>
  <option value="Brunei Darussalam">Brunei Darussalam</option>
  <option value="Bulgaria">Bulgaria</option>
  <option value="Burkina Faso">Burkina Faso</option>
  <option value="Burundi">Burundi</option>
  <option value="Cambodia">Cambodia</option>
  <option value="Cameroon">Cameroon</option>
  <option value="Canada">Canada</option>
  <option value="Cape Verde">Cape Verde</option>
  <option value="Cayman Islands">Cayman Islands</option>
  <option value="Central African Republic">Central African Republic</option>
  <option value="Chad">Chad</option>
  <option value="Chile">Chile</option>
  <option value="China">China</option>
  <option value="Colombia">Colombia</option>
  <option value="Comoros">Comoros</option>
  <option value="Congo">Congo</option>
  <option value="Cook Islands">Cook Islands</option>
  <option value="Costa Rica">Costa Rica</option>
  <option value="Cote d'Ivoire">Cote d'Ivoire</option>
  <option value="Croatia">Croatia</option>
  <option value="Cuba">Cuba</option>
  <option value="Cyprus">Cyprus</option>
  <option value="Czech Republic">Czech Republic</option>
  <option value="Democratic Republic Of Congo">Democratic Republic Of Congo</option>
  <option value="Denmark">Denmark</option>
  <option value="Djibouti">Djibouti</option>
  <option value="Dominica">Dominica</option>
  <option value="Dominican Republic">Dominican Republic</option>
  <option value="Ecuador">Ecuador</option>
  <option value="Egypt">Egypt</option>
  <option value="El Salvador">El Salvador</option>
  <option value="Equatorial Guinea">Equatorial Guinea</option>
  <option value="Eritria">Eritria</option>
  <option value="Estonia">Estonia</option>
  <option value="Ethiopia">Ethiopia</option>
  <option value="Færoe Islands">Færoe Islands</option>
  <option value="Falkland Islands">Falkland Islands</option>
  <option value="Fiji islands">Fiji Islands</option>
  <option value="Finland">Finland</option>
  <option value="France">France</option>
  <option value="French Guiana">French Guiana</option>
  <option value="French Polynesia">French Polynesia</option>
  <option value="French Southern And Antarctic Lands">French Southern And Antarctic Lands</option>
  <option value="Gabon">Gabon</option>
  <option value="Gambia">Gambia</option>
  <option value="Georgia">Georgia</option>
  <option value="Germany">Germany</option>
  <option value="Ghana">Ghana</option>
  <option value="Greece">Greece</option>
  <option value="Greenland">Greenland</option>
  <option value="Grenada">Grenada</option>
  <option value="Guadeloupe">Guadeloupe</option>
  <option value="Guam">Guam</option>
  <option value="Guatemala">Guatemala</option>
  <option value="Guernsey">Guernsey</option>
  <option value="Guinea">Guinea</option>
  <option value="Guinea-Bissau">Guinea-Bissau</option>
  <option value="Guyana">Guyana</option>
  <option value="Haiti">Haiti</option>
  <option value="Honduras">Honduras</option>
  <option value="Hong Kong">Hong Kong</option>
  <option value="Hungary">Hungary</option>
  <option value="Iceland">Iceland</option>
  <option value="India">India</option>
  <option value="Indonesia">Indonesia</option>
  <option value="Iran">Iran</option>
  <option value="Iraq">Iraq</option>
  <option value="Ireland">Ireland</option>
  <option value="Isle Of Man">Isle Of Man</option>
  <option value="Israel">Israel</option>
  <option value="Italy">Italy</option>
  <option value="Jamaica">Jamaica</option>
  <option value="Japan">Japan</option>
  <option value="Jersey">Jersey</option>
  <option value="Jordan">Jordan</option>
  <option value="Kazakhstan">Kazakhstan</option>
  <option value="Kenya">Kenya</option>
  <option value="Kiribati">Kiribati</option>
  <option value="Korea">Korea</option>
  <option value="Kuwait">Kuwait</option>
  <option value="Kyrgyzstan">Kyrgyzstan</option>
  <option value="Laos">Laos</option>
  <option value="Latvia">Latvia</option>
  <option value="Lebanon">Lebanon</option>
  <option value="Lesotho">Lesotho</option>
  <option value="Liberia">Liberia</option>
  <option value="Libya">Libya</option>
  <option value="Liechtenstein">Liechtenstein</option>
  <option value="Lithuania">Lithuania</option>
  <option value="Luxembourg">Luxembourg</option>
  <option value="Macao">Macao</option>
  <option value="Macedonia">Macedonia</option>
  <option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Maldives">Maldives</option>
  <option value="Mali">Mali</option>
  <option value="Malta">Malta</option>
  <option value="Marshall Islands">Marshall Islands</option>
  <option value="Martanique">Martanique</option>
  <option value="Mauritania">Mauritania</option>
  <option value="Mauritious">Mauritious</option>
  <option value="Mayotte">Mayotte</option>
  <option value="México">México</option>
  <option value="Micronesia">Micronesia</option>
  <option value="Moldova">Moldova</option>
  <option value="Monaco">Monaco</option>
  <option value="Mongolia">Mongolia</option>
  <option value="Montserrat">Montserrat</option>
  <option value="Morocco">Morocco</option>
  <option value="Mozambique">Mozambique</option>
  <option value="Namibia"><Namibia/option>
  <option value="Nauru">Nauru</option>
  <option value="Netherlands">Netherlands</option>
  <option value="Netherlands Antilles">Netherlands Antilles</option>
  <option value="New Caledonia">New Caledonia</option>
  <option value="New Zealand">New Zealand</option>
  <option value="Nicaragua">Nicaragua</option>
  <option value="Niger">Niger</option>
  <option value="Nigeria">Nigeria</option>
  <option value="Niue">Niue</option>
  <option value="Norfolk Island">Norfolk Island</option>
  <option value="North Korea">North Korea</option>
  <option value="Northern Mariana Islands">Northern Mariana Islands</option>
  <option value="Norway">Norway</option>
  <option value="Oman">Oman</option>
  <option value="Pakistan">Pakistan</option>
  <option value="Palau">Palau</option>
  <option value=Palestine>Palestine</option>
  <option value="Panama">Panama</option>
  <option value="Papua New Guinea">Papua New Guinea</option>
  <option value="Paraguay">Paraguay</option>
  <option value="Peru">Peru</option>
  <option value="Philippines">Philippines</option>
  <option value="Pitcairn Islands">Pitcairn Islands</option>
  <option value="Poland">Poland</option>
  <option value="Portugal">Portugal</option>
  <option value="Puerto Rico">Puerto Rico</option>
  <option value="Qatar">Qatar</option>
  <option value="Réunion">Réunion</option>
  <option value="Romania">Romania</option>
  <option value="Russia">Russia</option>
  <option value="Rwanda">Rwanda</option>
  <option value="Saint Helena">Saint Helena</option>
  <option value="Saint Kits And Nevis">Saint Kitts And Nevis</option>
  <option value="Saint Pierre And Miquelon">Saint Pierre And Miquelon</option>
  <option value="Saint Vincent And The Grenadines">Saint Vincent And The Grenadines</option>
  <option value="Samoa">Samoa</option>
  <option value="San Marino">San Marino</option>
  <option value="São Tomé And Príncipe">São Tomé And Príncipe</option>
  <option value="Saudi Arabia">Saudi Arabia</option>
  <option value="Senegal">Senegal</option>
  <option value="Serbia">Serbia</option>
  <option value="Seychelles">Seychelles</option>
  <option value="Singapore">Singapore</option>
  <option value="Slovak Republic">Slovak Republic</option>
  <option value="Slovenia">Slovenia</option>
  <option value="Solomon Islands">Solomon Islands</option>
  <option value="somalia">Somalia</option>
  <option value="South Africa">South Africa</option>
  <option value="South Georgia And The South Sandwich Islands">South Georgia And The South Sandwich Islands</option>
  <option value="South Korea">South Korea</option>
  <option value="Sudan">Sudan</option>
  <option value="Suriname">Suriname</option>
  <option value="Svalbard And Jan Mayen Islands">Svalbard And Jan Mayen Islands</option>
  <option value="Swaziland">Swaziland</option>
  <option value="Sweden">Sweden</option>
  <option value="Switzerland">Switzerland</option>
  <option value="Syria">Syria</option>
  <option value="Taiwan">Taiwan</option>
  <option value="Tajikistan">Tajikistan</option>
  <option value="Tanzania">Tanzania</option>
  <option value="Thailand">Thailand</option>
  <option value="Timor Leste">Timor Leste</option>
  <option value="Togo">Togo</option>
  <option value="Tokelau">Tokelau</option>
  <option value="Tonga">Tonga</option>
  <option value="Trinidad And Tobago">Trinidad And Tobago</option>
  <option value="Turkey">Turkey</option>
  <option value="Turkmenistan">Turkmenistan</option>
  <option value="Turks And Caicos Islands">Turks And Caicos Islands</option>
  <option value="Tuvalu">Tuvalu</option>
  <option value="Uganda">Uganda</option>
  <option value="Ukraine">Ukraine</option>
  <option value="United Arab Emirates">United Arab Emirates</option>
  <option value="United Kingdom Of Great Britain">United Kingdom Of Great Britain</option>
  <option value="United States Of America">United States Of America</option>
  <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
  <option value="United States Virgin Islands">United States Virgin Islands</option>
  <option value="Uruguay">Uruguay</option>
  <option value="Uzbekistan">Uzbekistan</option>
  <option value="Vanuatu">Vanuatu</option>
  <option value="Vatican City">Vatican City</option>
  <option value="Venezuela">Venezuela</option>
  <option value="Vietnam">Vietnam</option>
  <option value="Wallis and Futuna">Wallis and Futuna</option>
  <option value="Yemen">Yemen</option>
  <option value="Zaire">Zaire</option>
  <option value="Zambia">Zambia</option>
  <option value="Zimbabwe">Zimbabwe</option>
</select>

<button class="btn btn-primary pull-left" type="button" data-tab-continue="step-1">
Back
</button>

<button class="btn btn-primary pull-right" type="button" data-tab-continue="step-3">
Next
</button>
<script language="javascript">
var checkbox = document.queryString('SameFamilyName');
if (checkbox.checked) {
    document.queryString('same-family-name-container').classList.remove('hide');
    document.queryString('different-family-name-container').classList.add('hide');
}
else {
    document.queryString('same-family-name-container').classList.add('hide');
    document.queryString('different-family-name-container').classList.remove('hide');
}
</script>
Click to expand...
Might want to change that .queryString, to .querySelector
Also, you still need the '.' for class or '#' for id in the string... In your case, you are going to need to use the attribute selector.
JavaScript: 
document.querySelector('input[name="sameFamilyName"]')

That there reads as follows:
search the document for an input tag with a name attribute that has a value of "sameFamilyName"
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Antero360 said:
Might want to change that .queryString, to .querySelector
Also, you still need the '.' for class or '#' for id in the string... In your case, you are going to need to use the attribute selector.
JavaScript: 
document.querySelector('input[name="sameFamilyName"]')

That there reads as follows:
search the document for an input tag with a name attribute that has a value of "sameFamilyName"
Click to expand...
I still don't know what I'm doing wrong, as the error I get is that "Expected Expression, Got Keyword 'else'", when clearly there's a line that says "else". Here's what I mean.
JavaScript: 
function showHide() {
var checkbox = document.querySelector('input[name="sameFamilyName"]')
if (checkbox.checked)
    document.querySelector('SameFamilyName').classList.remove('hide');
    document.querySelector('DifferentFamilyName').classList.add('hide');
}
{ else
(checkbox.unchecked)
    document.querySelector('SameFamilyName').classList.add('hide');
    document.querySelector('DifferentFamilyName').classList.remove('hide');
}
 
Upvote 0 Downvote
Annabelle5893 said:
I still don't know what I'm doing wrong, as the error I get is that "Expected Expression, Got Keyword 'else'", when clearly there's a line that says "else". Here's what I mean.
JavaScript: 
function showHide() {
    var checkbox = document.querySelector('input[name="sameFamilyName"]')
    if (checkbox.checked) {
        document.querySelector('SameFamilyName').classList.remove('hide');
        document.querySelector('DifferentFamilyName').classList.add('hide');
    } else {
        document.querySelector('SameFamilyName').classList.add('hide');
        document.querySelector('DifferentFamilyName').classList.remove('hide');
    }
}
Click to expand...
 
Upvote 0 Downvote
There, I corrected the minor mistakes you made. Please look at the post above and study the structure of the function. Notice the placement of the opening and closing brackets and parenthesis. Take note of how if-else structure is.
 
Upvote 0 Downvote
Now that there are no errors, I'm wondering why the "Family Name For Couple", "Spouse 1 Family Name", and "Spouse 2 Family Name" edit boxes won't behave themselves. The "Spouse 1 Family Name" and "Spouse 2 Family Name" boxes are supposed to hide and the "Family Name For Couple" checkbox is supposed to show when the checkbox is checked. Vice versa when unchecked. This is despite the fact that I pasted the code you made from the clipboard.
 
Upvote 0 Downvote
Annabelle5893 said:
Now that there are no errors, I'm wondering why the "Family Name For Couple", "Spouse 1 Family Name", and "Spouse 2 Family Name" edit boxes won't behave themselves. The "Spouse 1 Family Name" and "Spouse 2 Family Name" boxes are supposed to hide and the "Family Name For Couple" checkbox is supposed to show when the checkbox is checked. Vice versa when unchecked. This is despite the fact that I pasted the code you made from the clipboard.
Click to expand...
So one thing I noticed while looking at your previous code...
HTML: 
<input checked="checked" name="SameFamilyName" value="FamilyNameForCouple" type="checkbox">

the checked attribute is a boolean attribute, so either true or false should be in there
 
Upvote 0 Downvote
So now, back to my Virtual Touchtone Phone. The expected Expression Got Keyword Else error appears on Line 99. However, I believe I put this correctly, using your new "If Else" structure. Here's the code:
JavaScript: 
function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
}
    if(allowDial == true) {
        dialTone.play();
}
    } else {
offHook ();
timeoutHowler.play();
}
 
Upvote 0 Downvote
Annabelle5893 said:
So now, back to my Virtual Touchtone Phone. The expected Expression Got Keyword Else error appears on Line 99. However, I believe I put this correctly, using your new "If Else" structure. Here's the code:
JavaScript: 
function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
}
    if(allowDial == true) {
        dialTone.play();
}
    } else {
offHook ();
timeoutHowler.play();
}
Click to expand...
Can you walk me through your logic here? I am a bit confused as to why you set this up in this manner.
 
Upvote 0 Downvote
Antero360 said:
Can you walk me through your logic here? I am a bit confused as to why you set this up in this manner.
Click to expand...
I'll explain this as best I can. If there's an incoming call, when the receiver is raised, "allowDial" is set to false and "TelephoneAnswered" indicates answering an incoming call. If there is no incoming call shown on screen, when the receiver is raised, "Telephone Receiver Pickup" (External), "Telephone Connect Noise" (Internal), and Dial Tone will play, and AllowDial is set to "True", allowing you to then dial digits. If you wait too long before dialing, say, 30 seconds, "DialToneTimedOut" appears, where the "TimeoutMessage" ("If you'd like to make a call") plays. After a second repetition of this message, function "OffHook" is applied, and the TimeoutHowler" plays indefinitely until you press Spacebar to hang up the phone, which triggers the "Telephone Disconnect Noise" (Internal) followed by "Telephone Receiver Hangup" (External).. So the Spacebar acts as the "Receiver Toggle". Are you with me so far?
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Annabelle5893 said:
I'll explain this as best I can. If there's an incoming call, when the receiver is raised, "allowDial" is set to false and "TelephoneAnswered" indicates answering an incoming call. If there is no incoming call shown on screen, when the receiver is raised, "Telephone Receiver Pickup" (External), "Telephone Connect Noise" (Internal), and Dial Tone will play, and AllowDial is set to "True", allowing you to then dial digits. If you wait too long before dialing, say, 30 seconds, "DialToneTimedOut" appears, where the "TimeoutMessage" ("If you'd like to make a call") plays. After a second repetition of this message, function "OffHook" is applied, and the TimeoutHowler" plays indefinitely until you press Spacebar to hang up the phone, which triggers the "Telephone Disconnect Noise" (Internal) followed by "Telephone Receiver Hangup" (External).. So the Spacebar acts as the "Receiver Toggle". Are you with me so far?
Click to expand...
ok so I am following. I do have a suggestion.
JavaScript: 
function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
    }
    else {
        dialTone.play();
        //you might want to think about having some kind of way to track whether or not a dialtone has been pressed
        offHook ();
        timeoutHowler.play();
    }
}
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom