문자열의 값을 변경합니다.

나는 진행 막대를 만들었으며 지금은 진도 값을 <h1> 태그에 추가하고 있습니다. 내가 성취하고자하는 것은 이전 가치를 새로운 가치로 대체하는 것입니다. 값이나 비슷한 것을 업데이트하는 데 사용할 수있는 예약어가 있는지 확실하지 않습니다. 올바른 방향으로 어떤 도움이나 강요라도 크게 감사 할 것입니다.문자열의 값을 변경합니다.

감사합니다.

이것은 내가 지금까지 무엇을 가지고 :

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("visual-progress").append(bar.value); 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

출처

2017-10-19 ThomasBrushel

변경 .innerHTML = bar.value;-.append(bar.value);.

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("progress").innerHTML = bar.value; 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress <span id="progress">0</span>%</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

출처

2017-10-19 14:27:55

당신은 텍스트를 무시/액세스 초기 값과 .innerHTML을 저장하는 대신 .append()

const button = document.getElementById("btn"); 
 
const bar = document.getElementById("progress-bar"); 
 
const heading = document.getElementById("visual-progress"); 
 

 
button.addEventListener('click', function(){ 
 
    if(bar.value >= 100) { 
 
    bar.value=100; 
 
    } else { 
 
    bar.value+=25; 
 
    } 
 
    document.getElementById("visual-progress").innerHTML = bar.value + "%"; 
 
});

body { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    margin-top: 3em; 
 
} 
 

 
progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    width: 100%; 
 
    height: 20px; 
 
    -webkit-transition: all 5s; 
 
    transition: all 5s; 
 
} 
 

 
progress::-webkit-progress-bar { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
} 
 

 
progress::-webkit-progress-value { 
 
    background-color: orange !important; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
    background: black; 
 
    color: white; 
 
    border: none; 
 
    padding: .5em 2em; 
 
} 
 
button:hover { 
 
    background: #1a1a1a; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<body> 
 
    <h2 id='visual-progress'>Quiz Progress</h2> 
 
    <progress id='progress-bar' max='100' value='0'></progress> 
 
    <button id='btn'>Next</button> 
 
</body>

출처

2017-10-19 14:28:01 guest271314

사용 로컬 변수의 .innerHTML을 사용할 수 있습니다 :

let initialValue = document.getElementById("visual-progress").innerHTML; 

button.addEventListener('click', function(){ 
    if(bar.value >= 100) { 
    bar.value=100; 
    } else { 
    bar.value+=25; 
    } 
    var newValue = initialValue + ' ' + bar.value; 
    document.getElementById("visual-progress").innerHTML = newValue; 
});

출처

2017-10-19 14:29:03 dhilt

의 "진행률 표시 줄"텍스트를 바꾸는 대신 이유가없는 추가 변수)? –

그는 "비주얼 진행"텍스트를 변경하기를 망설였습니다. 그것이 요구 사항을 이해하는 방법이며, 내가 옳았던 것처럼 보입니다. 이것도 그의 발췌문에서 ... – dhilt

나는 현재 텍스트를 지우고 원하는 텍스트로 바꿉니다.

var thisInfo = document.getElementById("visual-progress").innerHtml.Remove(); 
thisInfo = bar.value;

아니면 div 함수의 innerHtml에 remove 값을 지정하지 않고 div의 innerHtml을 새 값으로 지정하는 것이 좋습니다. 똑같이 작동해야합니다.

var thisInfo = document.getElementById("visual-progress").innerHtml = bar.value;

는 희망이 도움이

출처

2017-10-19 14:31:49 JakeofSpades

사용 .innerHTML 대신은 "시각적 진행"텍스트를 대체 (과를 사용하는 것이 좋습니다하게 자신의 문제에 관한 몇 가지 이유가 .append() .like document.getElementById("visual-progress").innerHTML = bar.value + "%";

출처

2017-10-19 14:40:56

문자열의 값을 변경합니다.

답변

관련 문제