Issue with Prompt Function and Hidden Elements

[wattse13]

Hello Everyone,

I am currently having an issue with the 3rd homework assignment. I am trying to use the prompt() method to replace a word throughout my entire story with the word the user inputs into the prompt window. The function I made to do this looks like:

`function addName() {

let name = prompt("enter their name here, if you want.;

if (name != null) {

document.getElementById("nameReplace").innerHTML = `${name}`;

} else if (name === null) {

document.getElementById("nameReplace").innerHTML = "Ellie";

} else {

document.getElementById("nameReplace").innerHTML = "Ellie";

} }`

In the HTML document, I used <span id="nameReplace"> to select which words I wanted changed through out the story. However, my function only replaces first word, surrounded by span tags, and none of the following.

I have also tried using document.getElementsByClassId along with <span> tags that included class tags, but that did not work either.

Any help would be greatly appreciated

[jballas]

@wattse13 did you figure anything out yet? If not, do you have a link to your repo so I can look at the full code? I don't know how helpful I can be, I only replaced information in one <div> with an ID tag, not in multiple places. But I'm definitely curious to see the solution to this.

[wattse13]

@jballas, thanks for the response! Unfortunately, I've been unable to figure out how to replace multiple words. I think it might be because I'm using an if statement which evaluates to true after the first word is replaced. Once the if statement evaluates to true, I'm assuming it doesn't check again. Maybe using a for loop would be better?

Here is a link to my repo: https://github.com/wattse13/441-homework The problem is in hw-3

[jballas]

@wattse13 that was my first thought, trying a loop. Because if I'm understanding it, right now the function is tied to clicking the button. Also It looks like we get some examples in Week 4, if you want to look ahead on the website. I will keep thinking about this and I can look at the code more this evening.

[michaelcassens]

Please let me know if I can help as well! There are examples for Week 3 as well.

On Mon, Feb 3, 2020 at 2:48 PM Julia Ballas notifications@github.com wrote:

@wattse13 https://github.com/wattse13 that was my first thought, trying a loop. Because if I'm understanding it, right now the function is tied to clicking the button. Also It looks like we get some examples in Week 4, if you want to look ahead on the website. I will keep thinking about this and I can look at the code more this evening.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Montana-Media-Arts/441-WebTech-Spring2020-Examples/issues/7?email_source=notifications&email_token=AAB7ORHXLUOJUS3KAJLAGUDRBCGKJA5CNFSM4KOVYZG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKVQW7A#issuecomment-581634940, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB7ORHZSPOTTB655FZ37XLRBCGKJANCNFSM4KOVYZGQ .

[jballas]

Well, I forgot this, but HTML Ids are unique and can only be applied to one element. (https://www.w3schools.com/html/html_id.asp). The only option is to use a class for multiple elements, I think. But you tried the document.getElementsByClassName?

[jballas]

Here this website has examples of the getElementsByClassName

https://www.geeksforgeeks.org/html-dom-getelementsbyclassname-method/

Toward the bottom they show a for loop. Only instead of .style you'll want to use .innerHTML. I hope that helps.

[wattse13]

@jballas, thanks for the suggestions and the link!

Yes, I've tried using document.getElementsByClassName but when I do so, nothing changes, including the first instance of the word I want to change.

I have changed my code a bit using the examples on the course website and from the link you sent me. Now it looks like this:

function addName() { let name = document.getElementById("nameField").value; for (i =0; i < name.length; i++ ){ if (name != null) { document.getElementsByClassName("nameReplace").innerHTML =${name}; console.log(name); { { The function addName() is called on a button click. When I type something into the the text field and then hit submit, the function logs the string typed into the text field to the console and gives me a message that the for loop repeats seven times. Seven is the number of words I've marked with span tags, which is great, but it still doesn't actually change the word surrounded by the span tags.

[jballas]

@wattse13 I'm really puzzled, is it because you need a global variable. Var instead of let?

I don't know if this will help. But I can show you how I got it to sorta work. The html had to already be on the page and then I input text to change it.

<!--text input box and enter button-->
<label id='ch_name'> Favorite Food? </label>
<input id='fav_food' type='text'>
<button id='btn_food' onclick='food()'>Change</button>

<!-- information in the <span> will be changed.-->
<span  class="food"> What is your favorite food? </span><br>
            <span  class="food">What is your favorite food?</span><br>
<

This is the function I used.

function food(){
  fav_food = document.getElementById('fav_food').value;

  var elements=document.getElementsByClassName('food');
              for (var i = 0; i < elements.length; i++) {
              elements[i].innerHTML = fav_food;
              }
  console.log(fav_food);
}

This is from my test website. https://github.com/jballas/441_work/blob/master/HW-1/test.html Live version is here: https://jballas.github.io/441_work/HW-1/test.html

[michaelcassens]

Hi all,

I sent this earlier to Eli, but hopefully this will help anyone else who is curious about this. Thanks!

Michael

On Sun, Feb 9, 2020 at 7:22 PM Julia Ballas notifications@github.com wrote:

@wattse13 https://github.com/wattse13 I'm really puzzled, is it because you need a global variable. Var instead of let?

I don't know if this will help. But I can show you how I got it to sorta work. The html had to already be on the page and then I input text to change it.

Favorite Food? Change

What is your favorite food?
What is your favorite food?
<

This is the function I used.

function food(){ fav_food = document.getElementById('fav_food').value;

var elements=document.getElementsByClassName('food'); for (var i = 0; i < elements.length; i++) { elements[i].innerHTML = fav_food; } console.log(fav_food); }

This is from my test website. https://github.com/jballas/441_work/blob/master/HW-1/test.html Live version is here: https://jballas.github.io/441_work/HW-1/test.html

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Montana-Media-Arts/441-WebTech-Spring2020-Examples/issues/7?email_source=notifications&email_token=AAB7ORET5O3AZSG6PVC5VX3RCC26PA5CNFSM4KOVYZG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELHA3JQ#issuecomment-583929254, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB7ORAQH2ANKMNPJU6DF5TRCC26PANCNFSM4KOVYZGQ .

[wattse13]

@jballas, @michaelcassens

I tried all of the solutions you both offered, but unfortunately I was unable to get my program to run exactly the way I wanted. But, I am still grateful for all the help! Maybe, if I get some extra free time in the next couple weeks, I'll poke at it again and hopefully be able to post some sort of solution.